AngularJS - 通过指令将 onClick 事件添加到按钮答案

【问题标题】：AngularJS - Adding an onClick event to a Button via a DirectiveAngularJS - 通过指令将 onClick 事件添加到按钮
【发布时间】：2014-11-12 16:01:10
【问题描述】：

我想通过指令向元素添加点击事件。重要的部分是不在指令中定义按钮或超链接或其他任何内容，而只定义 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 返回的函数中。可悲的是，我不知道如何做到这一点。

感谢您的帮助！

【问题讨论】：

标签： javascript angularjs

【解决方案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()) 行不正确，因为你想传递函数引用，而不是直接调用的结果（如果你把() 放在函数名之后会发生什么）。

【讨论】：

一件小事，把scope.functionToBeCalled换成functionToBeCalled。