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

Demo on plunkr

有关Angular guide中指令的更多信息。对我来说非常有帮助的是来自官方Angular博客文章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>

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

Answer 4

您应该在指令中使用控制器，并按照建议的先前响应在模板html中单击ng。但是，如果您需要对事件（单击）进行DOM操作，例如单击按钮，则需要更改按钮的颜色，然后使用链接功能并使用该元素来操作dom。

如果您只想在HTML元素或任何此类非dom操作任务上显示某些值，那么您可能不需要指令，并且可以直接使用控制器。

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

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

这将作为 clickme

属性的onclick事件

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

6 个答案: