1

我觉得这个问题很奇怪。

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

为什么会这样？

JSFiddle 在这里，代码如下：

<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>
4

2 回答 2

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

于 2015-03-01T12:25:45.947 回答
1

ng-if的文档解释了会发生什么：

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

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

于 2015-03-01T12:44:59.293 回答