Question

根据我阅读的一些链接＆＃34;与ng-show不同，ng-if指令创建了一个新范围。＆＃34;但我对以下情况感到困惑。见demo

<div ng-if="true">
      <div>
          visibility variable: {{showIt}}<br>
          visibility variable: {{$parent.showIt}}
      </div>

          <a href="" ng-show="!showIt" ng-click="$parent.showIt = true">Show It</a><br>
          <a href="" ng-show="!$parent.showIt" ng-click="$parent.showIt = true">Show It</a>

      <div ng-show="showIt">
        This is a dynamically-shown div.
        <a href="" ng-click="hideIt()">Hide it</a>
      </div>
 </div>

在上面的示例中，{{showIt}}和{{$ parent.showIt}}将评估为相同的值，甚至ng-sho将评估为相同的值。但是在ng-click中，如果我没有指定parent，那么它将给出意外的结果，因为ng-if创建子范围。我还检查了使用ng-model时需要使用父范围。那么为什么{{showIt}}和{{$ parent.showIt}}会评估为相同？

使用ng-if时应该注意什么？

Answer 1

ng-if会创建一个新的范围，但它不是隔离范围，因此它从父级继承原型。

但是，对原型继承的一个警告是，在子范围上设置原始值会影响父范围上的值，这就是为什么您需要显式设置$parent.showIt而不仅仅是showIt的原因。你的ng-click。

这是一个证明问题的小提琴： https://jsfiddle.net/sxkzzjfp/

示例1 ：child.showIt最初是指parent.showIt。尝试单击“切换父级”几次，您将看到值是同步的。执行showIt = !showIt会导致子值和父值分离，因为子值会影响父值。

示例2 ：Angular建议使用此解决方法。而不是直接在范围上设置原始值，而是将它们设置在对象上。执行config.show = true首先在父作用域上查找config对象的原型链，然后设置该对象的属性。在此示例中，子值和父值始终保持同步。

Answer 2

$ scope.show它存在于子范围内，子范围可以在父控制器上访问，这是填充相同值的唯一原因

当你使用child的一些$ scope变量时，如果变量存在于子控制器内，则它显示结果符合子值但是如果变量不存在于子控制器内，angular将在父控制器中搜索该变量{不在父控制器中}

例如： -

angulare.controller('parent',function($scope){
$scope.parent="hello its me Parent";
});

angular.controller('child',function($scope){
console.log($scope.parent);//it will retrn parent value
})

变量及其在ng-if中的父范围

2 个答案: