AngularJS - Добавление события onClick к кнопке с помощью директивы

Я хочу добавить событие 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!");
           }
       }
   }
})

Я попытался добавить "click" следующим образом:

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

К сожалению, это вызывает функцию один раз при вызове ссылки, но не при нажатии кнопки. Я думаю, что мне нужно использовать компиляцию, а не ссылку, и переместить функциюToBeCalled в функцию, возвращаемую компиляцией. К сожалению, я не знаю, как это сделать.

Спасибо за вашу помощь!

ОТВЕТЫ

Ответ 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()) неверна, потому что вы хотите передать ссылку на функцию, а не результат ее непосредственного вызова (что произойдет, если вы поместите () после имени функции).