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

Question

我正在使用 AngularJS 并试图将我的控制器作用域上的函数传递到指令的隔离作用域。

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

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

但是，当我将它作为

传递给我的指令时

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

或

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

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

也就是说，而不是调用

ctrl.functionName(a,b)

我得打电话

ctrl.functionName()(a,b)

如有任何帮助，我们将不胜感激。

我看到了一些这样的语法参考：

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

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

Answer 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() 将 return 函数本身。在我看来，这比从另一个方面解决问题更容易理解。

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

Pass function from controller scope to directive isolate scope

angularjs

angularjs-directive

isolate-scope