AngularJS - 通过指令向按钮添加onClick事件

Question

我想将click事件添加到带有指令的元素中.重要的是不要在指令中定义按钮或超链接或其他内容,而只定义onClick属性和调用的函数.

所以HTML看起来像这样:

<button my-dir type="button" class="btn btn-primary">test</button>

我的指令如下:

.directive('myDir', function(){
   return {
       restrict: 'A',
       scope: true,
       link: function(scope, element, attrs) {

           scope.functionToBeCalled = function(){
               console.log("It worked!");
           }
       }
   }
})

我试过添加这样的"点击":

element.bind('click',scope.functionToBeCalled());

不幸的是,这会在调用链接时调用该函数,但在单击按钮时则不会.我想我必须使用编译而不是链接并将functionToBeCalled移动到compile返回的函数中.可悲的是,我不知道如何做到这一点.

谢谢你的帮助!

Answer 1

它应该是这样的:

.directive('myDir', function () {
    return {
        restrict: 'A',
        scope: true,
        link: function (scope, element, attrs) {

            function functionToBeCalled () {
                console.log("It worked!");
            }

            element.on('click', functionToBeCalled);
        }
    };
});

你的行element.bind('click', scope.functionToBeCalled())是不正确的,因为你想传递函数引用,而不是它立即调用的结果(如果你把()函数名放在后面会发生什么).