Question

我有这段代码。从逻辑上讲，这应该进入无限渲染循环。但它保持稳定，输出是a和b，两者都打印在一起。

<div ng-if='hello'>
    <span ng-init='hello=false'>a</span>
</div>
<div ng-if='!hello'>
    <span ng-init='hello=true'>b</span>
</div>

这不是我正在做的任何事情的一部分。它突然浮现在我的脑海里，我无法在任何地方找到答案。

修改

我理解在上面的例子中，@ dfsq指出，ng-if创建了一个新范围。所以我在this example中更改了一些代码。所以这里ng-if都应该引用同一个对象。为什么不在这里进入循环？

HTML 的

<div ng-app='app'>
  <div ng-controller='appCtrl'>
    <div ng-if='object.hello'>
      <span ng-init='object.hello=false'>a</span>
    </div>
    <div ng-if='!object.hello'>
      <span ng-init='object.hello=true'>b</span>
    </div>
  </div>
</div>

JS

(function() {
  var app = angular.module("app", []);

  app.controller("appCtrl", [
    "$scope",
    function($scope) {
      $scope.object = {};
      $scope.object.hello = true;
    }
  ]);
})();

Answer 1

逻辑上，这应该进入无限渲染循环。

不，不应该。 ngIf指令创建新的子范围，因此ngInit修改（创建）独立标志，这不会影响ngIf（父范围hello）中使用的标志。< / p>

Answer 2

作为@dfsq mencioned，ng-if创建一个新的范围，如果你想创建一个无限循环，你应该使用类似的东西：

<div ng-if='hello'>
    <span ng-init='$parent.hello=false'>a</span>
</div>
<div ng-if='!hello'>
    <span ng-init='$parent.hello=true'>b</span>
</div>

为什么这不会导致无限循环？

2 个答案: