AngularJS - 自定义指令范围“&”做什么？答案

【问题标题】：AngularJS - Custom Directive Scope "&" do?AngularJS - 自定义指令范围“&”做什么？
【发布时间】：2015-10-09 19:25:49
【问题描述】：

所以我知道在指令中定义范围时，'@' 表示字符串，'=' 表示双向绑定。 “&”是什么意思？

这是一个示例指令：

angular.module('NoteWrangler')
.directive('nwCard', function() {
  return {
    restrict: 'E',
    templateUrl: './templates/directives/nw-card.html',
    scope: {
      header: '@',
      description: '=',
      tweeted: '='
    },
    link: function(scope, element, attrs){
      if(scope.tweeted)
      element.addClass('tweeted');
    }
  };
});

【问题讨论】：

stackoverflow.com/questions/14908133/…

标签： angularjs angularjs-directive angularjs-scope

【解决方案1】：

所以&, @, = 定义了关系如何协同工作，以实现范围隔离的工作方式

@：文本表示

=: 双向绑定 => 允许您操作数据

&: 是对父作用域的操作，其中传递了一个值。它通常用于将父作用域函数传递给指令。

& 很难用文字解释，但这里的链接引导我完成了它： https://egghead.io/lessons/angularjs-isolate-scope-expression-binding

【讨论】：

【解决方案2】：

简单来说，& 就是将function 或handler 传递给指令。一个好的起点是AngularJS Developer Guide。

这是一个非常基本的示例 (JSFiddle)：

angular.module('Joy', [])
    .controller('MyCtrl', ['$scope', function ($scope) {
        $scope.addition = function (v1, v2) {
            console.log(v1, v2);
            return v1 + v2;
        };
}])
    .directive('passMeContrller', [function () {
    return {
        restrict: 'A',
        scope: {
            add: '&',
        },
        template: '<div>{{ add({v1: 2, v2: 4}) }}</div>'
    };
}]);

HTML 是：

<div ng-app="Joy" ng-controller="MyCtrl">
    <div pass-me-contrller add="addition(v1, v2)"></div>
    <hr>
</div>

请注意，在指令模板中，函数参数应为{v1: 2, v2: 4}。它是一个对象，它将被 Angular 解码并传递给控制器 addition 函数。

供您参考：Pass callback function to directive

【讨论】：

我对“{v1: 2, v2: 4}”有点困惑。这只是为了设置输出的默认值吗？当我执行“模板：'
{{ add() }}
'”时，如果我执行“
是的，你是对的。这里{v1: 2, v2: 4}对应函数addition的两个参数。当然addition(1, 2) 运行良好，但在这种情况下，指令和外部控制器之间没有交互。此处的示例显示您可以在指令内部传入参数。
嗯，好的。非常感谢您的澄清。因此，在我的指令中，我可以有一个单独的控制器，它计算一些东西并将其添加到指令隔离范围中，然后将其传递给父级传入的函数。这是其他人的示例：jsfiddle.net/9L07epkv/5
如果您执行“范围：{add: '&add'}”之类的操作，这意味着什么？执行“&add”强制传入的值是一个名为“add”的函数？在一个我以前没见过的示例中，我看到文本被放在范围字符之后...
检查docs.angularjs.org/guide/directive。比如说，如果你使用 &myAdd，HTML 应该变成 <div pass-me-controller my-add="addition(v1, v2)"></div>: jsfiddle.net/9L07epkv/7