了解 angular js 中元素指令中的函数调用

Question

我正在浏览 angular js 文档并试图理解以下代码：-

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

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

我至少看了十几遍文档，但仍然不相信 {core: core} 是如何工作的以及函数 logChore(core) 是如何被调用的。

有人可以帮助我了解上面的工作原理吗？

Answer 1

嗯，在the documentation中有解释：

& or &attr - provides a way to execute an expression in the context of the parent scope. If no attr name is specified then the attribute name is assumed to be the same as the local name. Given <widget my-attr="count = count + value"> and widget definition of scope: { localFn:'&myAttr' }, then isolate scope property localFn will point to a function wrapper for the count = count + value expression. Often it's desirable to pass data from the isolated scope via an expression to the parent scope, this can be done by passing a map of local variable names and values into the expression wrapper fn. For example, if the expression is increment(amount) then we can specify the amount value by calling the localFn as localFn({amount: 22})

（强调我的）

Answer 2

这是 expression 使用 & 工作的方式，而我们想将函数传递给指令，如您所见，您有 done="logChore(chore)" done 属性传递 logChore具有 chore 参数的方法。

当你想从指令范围调用它时，由于 done: "&" 在指令隔离范围内，你可以使用 scope.done 访问 done 方法。因为它还有一个名称为 chore 的参数，您在指令元素中指定了该参数。对于使用 JSON 格式传递函数参数的值，如 {chore: chore} 其中第一个 chore 是方法参数， : 之后的另一部分只是 chore 即 ng-model值。

基本上，函数调用取决于您在指令元素的 done 属性中指定的内容。

done="logChore(myChore)" 然后它从指令调用将是 done({ myChore: chore})

了解 angular js 中元素指令中的函数调用

Understanding function call in element directives in angular js

angularjs

angular-directive