AngularJS：将函数传递给指令

Question

我将函数传递给指令时遇到了问题（对这篇文章很熟悉：AngularJS - pass function to directive，但我无法让它工作）

这是我的代码：

指令：

.directive('testdirective', function(){
  return{
    restrict: 'E',
    scope: {
      onClick: '&'
    },
    controller: 'TestController',
    controllerAs: 'tc',
    bindToController: true,
    template: '<div><button ng-click="onClick()">What UP</button></div>',
    replace: true
  }
})

控制器：

  TestController.$inject = ["$scope"];
  function TestController($scope) {
    $scope.testFunction = function(){
      alert("I´m the alert of the TestContoller");
    };
    $scope.test = 'test';
  }

HTML：

<div>
  <testdirective on-click="testFunction()"></testdirective>
</div>

我想要的听起来很简单，我只想将函数传递给指令并通过 ng-click 按钮执行它。

对我来说，我的代码看起来完全是 like this fiddle 但我的不工作：/

如果有人能给我一些提示，那就太棒了。

编辑

我的指令需要他自己的控制器！

稍后要传入的函数将来自另一个控制器！！！

Answer 1

小提琴和你的代码不一样。

您已将指令的控制器设置为“TestController”。我想你想做的是：

.directive('testdirective', function(){
    return{
        restrict: 'E',
        scope: {
            onClick: '&'
        },
        template: '<div><button ng-click="onClick()">What UP</button></div>',
        replace: true
    }
});

在你的 HTML 中，

<div ng-controller="TestController">
  <testdirective on-click="testFunction()"></testdirective>
</div>

编辑：基于 OP 的评论

app.directive('testdirective', function(){
        return{
            restrict: 'E',
            scope: {
                onClick: '&'
            },
            template: '<div><button ng-click="tc.onClick()">What UP</button></div>',
            replace: true,
            controller: 'TestController',
            controllerAs: 'tc',
            bindToController: true
        }
    });

    app.controller('TestController', function ($scope) {
        console.log($scope);
    }) ;

    app.controller('AnotherController', function ($scope) {
        $scope.testFunction = function(){
            alert("I´m the alert of the TestContoller");
        };

        $scope.test = 'test';
    });

还有，你的 HTML

<div ng-controller="AnotherController">
    <testdirective on-click="testFunction()"></testdirective>
</div>

您正在将指令告诉 bindToController。因此，在指令的模板中，onClick 绑定到控制器而不是作用域。因此，您可以在指令模板中以 tc.onClick() 的身份通过控制器访问 onclick。

Answer 2

您可能希望传递一个方法作为参考：

1.将函数作为引用而不是调用传递：

<div>
  <testdirective on-click="testFunction"></testdirective>
</div>

2.更新指令：

.directive('testdirective', function(){
    return{
        restrict: 'E',
        scope: {
            onClick: '='
        },
        template: '<div><button ng-click="onClick()">What UP</button></div>',
        replace: true
    }
});

JSFIDDLE.

Answer 3

好吧，在您的testdirective 中，您定义了控制器TestController。 您尝试通过onClick 指令范围参数调用的testFunction() 在控制器TestController 中定义，它是指令控制器。 因此，您可以直接调用，而不是通过onClick 调用

template: '<div><button ng-click="testFunction()">What UP</button></div>'.

这非常令人困惑，您在指令中定义控制器并再次通过相同指令的范围参数引用它的一个函数，看起来像递归。

如果您想通过指令范围参数调用，那么您应该进行以下更改。

例如 JS：

<div ng-controller="TestController" ng-app="dr">
  <testdirective on-click="testFunction()"></testdirective>
</div>

 app.directive('testdirective', function() {
    return{
    restrict: 'E',
    scope: {
      onClick: '&'
    }, 
    template: '<div><button ng-click="onClick()">What UP</button></div>',
    replace: true
  }
});

Answer 4

指令：

.directive('testdirective', function(){
return{
restrict: 'E',
scope: {
  onClick: '=onClick'
},
controller: 'TestController',
controllerAs: 'tc',
bindToController: true,
template: '<div><button ng-click="onClick()">What UP</button></div>',
replace: true
}
})

使用'=' 而不是'&'，这样您就可以在指令中获取html 函数。您可以简单地通过 HTML 传递 onClick 参数 HTML：

<div>
<testdirective on-click="testFunction()"></testdirective>
</div>