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>

我想要的听起来非常简单，我只是想将该函数传递给指令并通过按下该按钮来执行它。

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

如果有人给我一些提示，那会很棒。

编辑

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

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

Answer 1

小提琴与你的代码不同。

您已将指令的控制器设置为＆＃34; TestController＆＃34;。我假设你想做的是：

.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绑定到控制器而不是范围。因此，您可以通过控制器访问onclick，作为指令模板中的tc.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。您尝试通过testFunction()指令范围参数调用的onClick在控制器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

Directivie：

.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>

AngularJS：将函数传递给指令

4 个答案: