Question

我正在完成一些教程，试图加强对隔离范围的掌握，并且我遇到了一些问题。我得到了很高的概念，但我试图证明一些我不明白的行为。在我理解它的方式上，附加的选项如下：

@ - 允许您输入字符串＆安培; - 提供单向数据绑定 = - 提供双向数据绑定

所以考虑以下代码：

<div ng-app="choreApp">
  <div ng-controller="ChoreCtrl">
    <kid done="logChore(chore)"></kid>
  </div>
</div>

var app = angular.module('choreApp', []);

app.controller("ChoreCtrl", function($scope){
  $scope.logChore = function(chore){
    alert(chore + " is done!");
  };
});

app.directive("kid", function() {
  return {
    restrict: "E",
     scope: {
        done: "&"
     },
    template: '<input type="text" ng-model="chore">' +
      '{{chore}}' +
      '<div class="button" ng-click="done({chore: chore})">I\'m done</div>'
  };
});

上面的信息很好，并且＆＃39;＆amp;＆＃39; logChore函数工作正常。

＆＃39; @＆＃39;没有像预期的那样工作，因为它只是在字符串中读取，当我点击没有任何反应时。

但是，我也期待＆＃39; =＆＃39;工作正常，因为它只是一个双向绑定，但实际发生的是函数执行三次而我没有任何操作（点击），然后似乎正常运行。为什么函数执行三次？

Answer 1

当您对done="logChore(chore)"使用双向绑定（“=”）时，将调用logChore(chore) 的结果分配给done - 函数本身（如&所做）。

因此，每当Angular调用$watch以查看其正在观看的内容是否已更改时，调用函数logChore(chore)。由于脏检查$watch经常每$digest次循环评估监视列表多次 - 这就是为什么你看到3次执行（并且你会看到更多任何时候触发$digest的事情）。

为了在使用=时传递函数本身，你可以这样做：

<kid done="logChore"></kid>

并改变你的模板以传递家务：

ng-click="done(chore)"

这是a fiddle的工作原理。

此外，不是将@视为传递字符串，而是将其更广泛地视为单向数据绑定。这是单向的，因为父范围的更改将反映在指令中，但指令的隔离范围的更改不会反映在父级中。

AngularJS指令隔离范围行为

1 个答案: