javascript - 能否在使用它的 block 内修改 ng-if 变量？

Question

我觉得这个问题很奇怪。

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

为什么会这样？

The JSFiddle is here代码如下:

<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 子作用域的问题，事实上您正在尝试在子作用域中双向绑定(bind)原语。

您应该始终尝试将范围内的对象用作模型，以便您利用原型(prototype)继承的好处。

看这里的区别:

<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