Question

所有

我定义了一个指令：

.directive("hellobutton", function(){
    return {
        restrict: "AE",
        scope: {},
        controller: function($scope){
            $scope.sayhello = function(){
                 console.log("hello");
            }
        }
    }
})

我想知道如何在这个指令中使用该sayhello处理程序，如：

<hellobutton ng-click="sayhello()"></hellobutton>

基本上我不想从outter范围传递sayhello，但让这个指令内部范围来处理它。

我想知道是否可能或者我必须在模板中定义该处理程序？

Answer 1

您希望将函数作为参数传递：

.directive("hellobutton", function(){
    return {
        restrict: "AE",
        scope: {
          callback: '&'
        },
        controller: function($scope){
            $scope.callback();
        }
    }
})

和

<hellobutton callback="sayhello()"></hellobutton>

Answer 2

是的，你可以。只需使用链接函数定义指令并绑定到click事件即可。然后它可以附加到任何元素。见plunker

JS：

app.directive("hellobutton", function(){
    return {
        restrict: "A",
        link: function(scope, elem, attr) {
          elem.on('click', function() {
            console.log("hello");
          })
        }
    }
})

标记：

<button type="button" hellobutton="">Click Me, I'm a button</button>
<div hellobutton="">Click me too, I'm a DIV</div>

如何将ng-click绑定到指令内定义的事件处理程序？

2 个答案: