Question

有人可以解释以下行为背后的根本原因吗？

如果具有隔离范围scope: {}的指令具有ng-repeat AND replace: true的根元素，则它会“中断”隔离范围，这意味着隔离范围不可访问/可见在指令中，指令开始从外部范围接收变量。

这是我可以做出的最低限度可重复的例子：

app.controller('MainCtrl', function($scope) {
  $scope.name = 'MainCtrl';
});

app.directive("foo", function(){
  return {
    replace: true,
    scope: {},
    template: "<div ng-repeat='item in [1]'>{{name}}</div>",
    controller: function($scope){
      $scope.name = "foo";
    }
  };
});

以下视图将呈现“MainCtrl”：

<div ng-controller="MainCtrl">
   <foo></foo>
</div>

在模板中添加非ng-repeat的root用户或设置replace: false会产生预期的结果“foo”。

Plunker

Answer 1

这不仅仅发生在ng-repeat上，这似乎也适用于创建像ng-if这样的范围的任何其他指令。看起来，这是因为指令的孤立范围被ng-repeat的子范围覆盖。并且由于replace:true选项ng-repeat成为指令源元素的一部分，即<foo></foo>，ng-repeat的子范围是从最终父范围MainCtrl计算出来的（这似乎是这是错误的）这导致整个指令模板绑定到控制器的子范围，并且针对该范围评估任何插值。因此，您会看到主控制器的范围在指令中被扩展。这似乎是一个错误。

带有根元素的指令，带有ng重复和替换：true

1 个答案: