Question

我正在浏览角度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中解释：

＆安培;或＆amp; attr - 提供在父作用域的上下文中执行表达式的方法。如果未指定attr名称，则假定属性名称与本地名称相同。给定<widget my-attr="count = count + value">和scope: { localFn:'&myAttr' }的窗口小部件定义，然后隔离范围属性localFn将指向count = count + value表达式的函数包装器。通常需要通过表达式将数据从隔离范围传递到父作用域，这可以通过将局部变量名称和值的映射传递到表达式包装器fn来完成。例如，如果表达式为increment(amount)，那么我们可以通过将localFn调用为localFn({amount: 22})
来指定金额值

（强调我的）

Answer 2

当我们想要将函数传递给指令时，expression使用&的方式是正确的，正如您所看到的那样，done="logChore(chore)"已完成属性传递logChore方法有chore参数。

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

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

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

理解角度js

2 个答案: