angularjs - 如果父级有 ng-if，Angular ng-show 不起作用

Question

我有一个 View ，其中父 div 上有 ng-if ，而某些子元素上有 ng-show 。当嵌套在带有 ng-if 的元素下时，ng-show 似乎无法正常工作。这是 Angular 的错误还是我做错了什么？ See this plunker .

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>

JavaScript:

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

谢谢

安迪

Answer 1

Nemesv 上面提到您应该使用 $parent，但尽管有效，但这不是正确的解决方案。该解决方案的问题是:

1. 它在 ng-if 的作用域和 Controller 作用域之间创建了高度耦合。
2. 由于 1，将 ng-if 更改为 ng-show 会破坏您的代码。
3. 一旦您要嵌套更多范围，它就会变得一团糟($parent.$parent.$parent....)

解决方案:

快速正确的解决方案是不要直接在作用域上定义 showIt，而是将其放置在对象中(例如 component.isVisible)。

说明:

要理解为什么这个看似违反直觉的解决方案有效并且确实是正确的解决方案，您首先需要更多地了解继承如何与 Angular 一起工作:

作用域使用原型(prototype)继承相互继承，这是 Javascript 中内置的继承形式。看起来如下:

var myScope = {
    showIt : false
}
var ngIfScope = {};
nfIfScope.__proto__ = myScope;

当您现在获取 ngIfScope 对象上不存在的属性时，它将在其原型(prototype)中查找以找到它。因此，如果您请求 ngIfScope.showIt 浏览器会执行以下操作:

if (ngIfScope.hasOwnProperty("showIt")) {
    return ngIfScope.getOwnProperty("showIt"); // getOwnProperty does not actually exist in javascript
} else {
    return ngIfScope.__proto__.showIt;
}

(实际上，这是递归发生的，但这对于本例来说并不重要)。

设置属性要简单得多:

ngIfScope.setOwnProperty("showIt", newValue);

现在我们有了这些信息，我们可以看到您的原始实现到底出了什么问题。

我们从以下范围开始:

var myScope = {
    showIt : false
}
var ngIfScope = {};
ngIfScope.__proto__ = myScope;

当用户单击显示按钮时，将执行以下代码:

ngIfScope.showIt = true;

结果范围是:

var myScope = {
    showIt : false
}
var ngIfScope = {
    showIt : true
}
ngIfScope.__proto__ = myScope;

正如您所看到的，新值被写入 ngIfScope 中，而不是您可能期望的那样写入 myScope 中。结果是 ngIfScope.showIt 掩盖了 myScope 中的变量，而 myScope.showIt 实际上根本没有改变。

现在让我们看看如果我们将可见性触发器放置在对象中会发生什么。

我们从新的范围开始:

var myScope = {
    component : {
        isVisible : false
    }
};
var nfIfScope = {};
ngIfScope.__proto__ = myScope;

到目前为止没有太大变化。但现在让我们看看当用户单击按钮时会发生什么:

ngIfScope.component.isVisible = true;

通过一些辅助变量，我们可以看到它是如何在浏览器中执行的:

var tempObject = ngIfScope.component; 
tempObject.isVisible = true;

这里的第一行是一个get操作。由于 component 未在 ngIfScope 上定义，Javascript 引擎将查看 ngIfScope (myScope) 的原型(prototype)来查找正如我上面所解释的那样。因此:

tempObject === ngIfScope.__proto__.component === myScope.component 

我们现在直接在 myScope.component 上更改值，因此这次变量不会被掩盖。结果范围是:

var myScope = {
    component : {
        isVisible : true
    }
};
var ngIfScope = {};
var ngIfScope.__proto__ = myScope;

我们现在有了一个工作实现，无需显式绑定(bind)到 $parent 作用域，因此作用域之间没有(或很少)耦合。原型(prototype)继承为我们完成了这项工作，嵌套作用域也可以开箱即用。