将函数从控制器范围传递到指令隔离范围答案

【问题标题】：Pass function from controller scope to directive isolate scope将函数从控制器范围传递到指令隔离范围
【发布时间】：2015-10-28 17:04:27
【问题描述】：

我正在使用 AngularJS，并试图将控制器范围内的函数传递给指令的隔离范围。

我知道我以前做过，但这次遇到了问题。

该函数接受两个输入，并将它们记录到控制台。

但是，当我将它作为

传递给我的指令时

<div my-dir my-function="functionName"></div>

或

<div my-dir my-function="functionName()"></div>

并尝试从我的指令控制器中调用它，我实际上得到了一个不带参数并返回我的函数的函数。

也就是说，而不是调用

ctrl.functionName(a,b)

我得打电话

ctrl.functionName()(a,b)

任何帮助将不胜感激。

我见过一些这样的语法参考：

 <div my-dir my-function="functionName({})"></div>

【问题讨论】：

标签： angularjs angularjs-directive isolate-scope

【解决方案1】：

html:

<div my-dir my-function="functionName()"></div>

指令：

angular.directive('myDir', function() {
  return {
    scope: {
      callback: '&myFunction'
    },
    controller: function($scope) {
      $scope.callback({param1: val1, param2: val2});
  };
});

【讨论】：

将此表示法与参数字典一起使用是有效的。为什么这是必要的？另外，我必须将方法传递给带有参数名称的指令

【解决方案2】：

尝试使用范围隔离的以下代码：

angular.module("Demo", [])  
  .controller("ChildCtrl", function($rootScope, $scope) {
    $scope.testFunc = function (a, b) {
        return a + b;
    }
 })
.directive("isoElement", function() {
  return {
    restrict: "E",
    scope: {
        testFunc: '&'
    },
    link: function(scope) {
      console.log(scope.testFunc()(1, 2));
    }
  };
});

指令用法将是：

<div ng-app="Demo" ng-controller="ChildCtrl">
    <iso-element test-func="testFunc"></iso-element>
</div>

您需要执行 scope.testFunc()(..) 因为 scope.testFunc() 将返回函数本身。 IMO 这比从另一个方面解决问题更容易理解。

【讨论】：

我的问题是我不明白为什么我必须调用 testFunc()()，而 testFunc 是一个返回值的函数，而不是一个函数。正确的答案似乎是从指令中调用函数这个符号 testFunc({arg1:1,arg2:2})
在这种情况下，“&”只传递引用，使用“=”传递整个函数。当引用被传递时，我们需要首先获取函数本身，然后调用它。另一方面，如果我们在作用域隔离中使用“=”，那么我们会在作用域中获取函数本身并且可以简单地调用它。