Angular ng-show not working if parent has ng-if

user_152517 0
Viewed 12695

I have a view where a parent div has ng-if on it, and some child element has ng-show on it. It seems that the ng-show isn't working correctly when nested under an element with ng-if on it. Is this an Angular bug or am I doing something wrong? See this plunker.

The HTML:

<!-- with ng-if on the parent div, the toggle doesn't work -->
    <div ng-if="true">
      <div>
          visibility variable: {{showIt}}
      </div>
      <div ng-show="!showIt">
          <a href="" ng-click="showIt = true">Show It</a>
      </div>
      <div ng-show="showIt">
        This is a dynamically-shown div.
        <a href="" ng-click="hideIt()">Hide it</a>
      </div>
    </div>

    <br/><br/>

    <!-- with ng-show on the parent div, it works -->
    <div ng-show="true">
      <div>
          visibility variable: {{showIt}}
      </div>
      <div ng-show="!showIt">
          <a href="" ng-click="showIt = true">Show It</a>
      </div>
      <div ng-show="showIt">
        This is a dynamically-shown div.
        <a href="" ng-click="hideIt()">Hide it</a>
      </div>
    </div>

The JavaScript:

scope.hideIt = function () {
  scope.showIt = false;
};

Thanks,

Andy

angularjs
4 Answers

So what Tiddo said about Namesv is true, but also overtly complex.

This'll do it:

scope.pageData = {};
scope.hideIt = function () {
  scope.pageData.showIt = false;
};

Containing showIt in an object on the parent scope will ensure it's the same object when using it in children scopes

user_659850
Related