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

在链接函数中，是否有一个更“angular”的方式来绑定一个function的点击事件？

现在，我正在做…

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

演示在plunkr上

更多关于Angular指南的指令。 对我来说非常有帮助的是来自官方的Angular博客的video关于这些指令 。

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> 

为什么你想写一个新的指令只是为了将你的点击事件映射到你的范围的callback？ ng-click已经为你做了。

Answer 4

您应该在指令中使用控制器，并在模板html中单击ng，如前面的build议回应一样。 但是，如果您需要对事件（点击）进行DOM操作，比如点击button，则需要更改button的颜色，然后使用链接function并使用元素来操作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事件