在Angular Directive的link函数中使用ng-click vs bind

Question

在链接函数中,是否有更多的"Angular"方法将函数绑定到click事件？

现在,我正在......

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

这是Angular的做法还是丑陋的黑客行为？也许我不应该这么关心,但我是这个框架的新手,并且想知道"正确"的做事方式,特别是随着框架的推进.

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++
         }
       }
     }
   });

关于plunkr的演示

更多关于Angular指南中的指令.对我来说非常有帮助的是官方Angular博客文章关于这些指令的视频.

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>

为什么要编写新的指令只是为了将click事件映射到范围的回调？ng-click已经为你做了.