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

В функции ссылок есть ли способ "Angular" привязать функцию к событию клика?

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

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

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

Ответы

Ответ 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++
         }
       }
     }
   });

Демо на plunkr

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

Ответ 2

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

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

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

Ответ 3

Не нужно просто:

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

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

Ответ 4

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

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

Ответ 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

Ответ 6

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

это будет действовать как события onclick для атрибута clickme