在 Angular 指令的链接功能中使用 ng-click vs bind答案

【问题标题】：Using ng-click vs bind within link function of Angular Directive在 Angular 指令的链接功能中使用 ng-click vs bind
【发布时间】：2013-01-27 05:59:45
【问题描述】：

在链接函数中，是否有更“Angular”的方式将函数绑定到点击事件？

现在，我正在做...

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

这是 Angular 的做法还是丑陋的 hack？也许我不应该这么担心，但我是这个框架的新手，想知道“正确”的做事方式，尤其是随着框架的发展。

【问题讨论】：

两者都适合做，你可以继续做任何你认为合适的事情。您的示例中的唯一区别是 bind 确实启动了 digest 循环；这可能是您可能想要的东西，但请注意。
Umur，你的意思是说bind 不会启动摘要循环吗？
我在需要避免昂贵的摘要周期时使用它，例如需要用户操作的大型数据集。唯一的区别是我在链接中使用它：function()。

标签： angularjs angularjs-directive

【解决方案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 中的视频对我很有帮助。

【讨论】：

我实际上想将 ng-click 属性添加到元素本身，而不是模板元素（在您的情况下为按钮）。你知道怎么做吗？
没关系，我想通了——我可以在指令中使用“替换”选项。
@Maxim Grach 为什么不把按钮 HTML 放在 HTML 中呢？显示一个调用控制器方法的按钮似乎需要做很多工作，并且在查看 HTML 时不太明显。 PS我也在学习角度。
@turbo2oh 这个例子非常简单而且脱离了现实生活。但它展示了如何使用角度指令。
@MaximGrach using scope: {} 将隔离范围，而使用 true 允许共享范围。

【解决方案2】：

我认为这很好，因为我见过很多人这样做。

如果您只是在指令中定义事件处理程序，不过，您不必在范围上定义它。跟着就好了。

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

【讨论】：

在点击回调时，如果你正在改变任何模型/范围数据，你会想要调用scope.$apply()，或者将方法的内容放入scope.$apply(function() { ...这里的内容...});

【解决方案3】：

不应该是这样吗：

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

您为什么要编写一个新指令来将您的点击事件映射到您范围内的回调？ ng-click 已经为你做到了。

【讨论】：

我也很好奇关于这个的意见。 ng-click 与 element.bind()
也许只是为了使该部分可重用，在其他地方可重复代码。
@Estevez 这正是我的用例。

【解决方案4】：

您应该在指令中使用控制器并在模板 html 中使用 ng-click，如先前的响应所建议的那样。但是，如果您需要对事件（单击）进行 DOM 操作，例如单击按钮，想要更改按钮的颜色左右，则使用 Link 函数并使用元素来操作 dom。

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

【讨论】：

【解决方案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); 
        });
    };
});

这将作为属性 clickme

上的 onclick 事件

【讨论】：