javascript - AngularJS 指令隔离作用域行为

Question

我正在学习一些教程，试图巩固我对隔离作用域的掌握，但我遇到了一些问题。我得到了高深的概念，但我试图证明我所看到的一些我不理解的行为。在我理解的较高层次上，附加的选项是这样工作的:

@ - 允许您输入字符串 & - 提供一种数据绑定(bind)方式 = - 提供两种方式的数据绑定(bind)

所以考虑下面的代码:

<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>'
  };
});

以上连接正常，'&' logChore 函数有效，一切正常。

'@' 不起作用，正如预期的那样，因为它只是读取字符串，当我点击时没有任何反应。

但是，我也希望“=”能够正常工作，因为它只是双向绑定(bind)，但实际发生的是该函数执行了三次而我没有采取任何操作(单击)，然后似乎正常运行.为什么函数执行了3次？

Answer 1

当您对 done="logChore(chore)" 使用双向绑定(bind) ("=") 时，调用 logChore(chore) 的结果 被分配给 done - 不是函数本身(与 & 一样)。

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

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

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

然后更改您的模板以像这样传递杂务:

ng-click="done(chore)"

这是 a fiddle的工作。

此外，与其将 @ 视为传递字符串，不如将其更广泛地视为单向数据绑定(bind)。这是单向的，因为父范围的更改将反射(reflect)在指令内部，但指令的隔离范围的更改不会反射(reflect)在父范围中。