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

Question

我想使用指令向元素添加点击事件。重要的是不要定义按钮或超链接或指令中的任何内容，而只定义 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 移动到编译返回的函数中。很遗憾，我不知道如何实现。

感谢您的帮助!

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()) 这行是不正确的，因为你想传递函数引用，而不是它立即调用的结果(会发生什么如果你把 () 放在函数名之后)。