Использование ng-click vs bind в функции ссылки Angular Directive

Question

В функции ссылок есть ли более «Угловой» способ привязки функции к событию клика?

Прямо сейчас, я делаю ...

myApp.directive('clickme', function() { 
    return function(scope, element, attrs) { 
    scope.clickingCallback = function() {alert('clicked!')}; 
    element.bind('click', scope.clickingCallback); 
} }); 

Это Угловая способ сделать это, или это некрасиво хак? Возможно, я не должен быть так обеспокоен, но я новичок в этой структуре и хотел бы знать «правильный» способ делать что-то, тем более, что рамки продвигаются вперед.

Answer 1

Вы можете использовать контроллер в директиве:

angular.module('app', []) 
    .directive('appClick', function(){ 
    return { 
     restrict: 'A', 
     scope: true, 
     template: '<button ng-click="click()">Click me</button> Clicked {{clicked}} times', 
     controller: function($scope, $element){ 
     $scope.clicked = 0; 
     $scope.click = function(){ 
      $scope.clicked++ 
     } 
     } 
    } 
    }); 

Demo on plunkr

Подробнее о директивах в Angular guide. И очень полезно для меня было видео с официального сообщения Angular blog About those directives.

Answer 2

Я думаю, это прекрасно, потому что я видел, как многие люди так поступают.

Если вы просто определяете обработчик событий в директиве , вам необязательно определять его в области. Следующее было бы хорошо.

myApp.directive('clickme', function() { 
    return function(scope, element, attrs) { 
    var clickingCallback = function() { 
     alert('clicked!') 
    }; 
    element.bind('click', clickingCallback); 
    } 
}); 

Answer 3

Не должно быть просто:

<button ng-click="clickingCallback()">Click me<button> 

Почему вы хотите, чтобы написать новую директиву просто сопоставить события нажатия на обратный вызов на Вашей области? ng-click уже делает это для вас.

Answer 4

myApp.directive("clickme",function(){ 
    return function(scope,element,attrs){ 
     element.bind("mousedown",function(){ 
      <<call the Controller function>> 
       scope.loadEditfrm(attrs.edtbtn); 
     }); 
    }; 
}); 

это будет действовать как OnClick события на атрибуте ClickMe

Answer 5

В этом случае нет необходимости в директиве. Это делает работу:

<button ng-click="count = count + 1" ng-init="count=0"> 
    Increment 
</button> 
<span> 
    count: {{count}} 
</span> 

Источник: https://docs.angularjs.org/api/ng/directive/ngClick

Answer 6

Вы должны использовать контроллер в директиве и нг щелкните в шаблоне HTML, как предложено предыдущие ответы. Однако, если вам нужно выполнить манипуляции с DOM при событии (щелчок), например, щелкнув по кнопке, вы хотите изменить цвет кнопки или так, затем используйте функцию Link и используйте элемент для управления dom.

Если все, что вы хотите сделать, это какое-то значение для элемента HTML или любой такой манипулятивной задачи, не требующей вмешательства, тогда вам может не понадобиться директива и вы можете напрямую использовать контроллер.