Question

我发现这个问题很奇怪。

基本上我希望基于ng-if条件在页面上存在块。但是当我尝试修改所述块内的ng-if时，它对任何其他元素都没有任何影响。

为什么会这样？

<div ng-controller="MyCtrl">
    <div ng-init="shouldShow=false">
        <div ng-if="!shouldShow">
            <p>{{shouldShow}}</p>
            <div>
                <button ng-click="shouldShow=!shouldShow">Hide Section</button>
                <button ng-if="!shouldShow">Should Disappear</button>
            </div>
        </div>
    </div>
</div>

Answer 1

这是ng-if子范围的问题，以及您尝试双向绑定子范围中的基元的事实。

您应该始终尝试将范围中的对象用作models，以便利用原型继承的优势。

在此处查看不同之处：

<div ng-controller="Ctrl">
      <div >
        <p>{{model.shouldShow}}</p>
        <div ng-if="!model.shouldShow">
            <button ng-click="model.shouldShow=!model.shouldShow">Hide Section</button>
            <p>{{model.shouldShow}}</p>
        </div>
    </div>
</div>

JS

function Ctrl($scope) {
    $scope.model={shouldShow:false}
}

另请阅读ng-init的文档。它不应该用于任意变量。它的主要目的是在ng-repeat

中对变量进行别名处理

的 DEMO

Answer 2

documentation of ng-if解释了会发生什么：

请注意，使用ngIf删除元素时，其范围将被销毁并且在恢复元素时创建新范围。范围在ngIf中创建的，使用prototypal从其父作用域继承遗产。这是一个重要的含义，如果使用ngModel 在ngIf中绑定到父级中定义的javascript原语范围。在这种情况下，对变量内的任何修改子范围将覆盖（隐藏）父范围中的值。

简而言之：在子作用域中修改shouldShow后，它将覆盖父作用域的shouldShow（原型继承）。正如另一个答案所指出的，这可以通过共享对象的间接来解决：wrapperObject.shouldShow。除非您在子范围中为wrapperObject分配新值，否则它将指向与父范围相同的实例（因此包含shouldShow的相同实例）。

可以在使用它的块内修改ng-if变量吗？

2 个答案: