Использовать НГ-нажмите кнопку против привязки в функции связи угловых директива

в функции link существует ли более "угловой" способ привязки функции к событию click?

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

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

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

6 67
angularjs angularjs-directive

6 ответов:

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

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

подробнее о директивы Угловое руководство. И очень полезным для меня было видео из официального углового блога об этих директивах.

61

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

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

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

разве это не должно быть просто:

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

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

10

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

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

0

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

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

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

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

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

-4