实施例

Question

我看到有些人绑定点击指令的链接功能而不是ng-click。

我已经研究了很长时间，并没有找到答案。任何人都可以给我一个理由吗？

我一直在使用ng-click，因为它比创建新指令容易得多，我可以一目了然。

实施例

我如何编写指令

HTML

<some-directive>
  <button ng-click="someFunction()">Lorem Ipsum</button>
</some-directive>

的Javascript

angular.module('myapp',[])
.directive('someDirective',function(){
  return {
    restrict:'E',
    scope:{},
    link: function (scope,element,attrs) {

      //Code goes here

      scope.someFunction = function() {
        //callback
      }

      //More code goes here

    }
  }
})

多数人如何撰写指令

HTML

<some-directive>
  <button click-trigger>Lorem Ipsum</button>
</some-directive>

的Javascript

angular.module('myapp',[])
.directive('someDirective',function(){
  return {
    restrict:'E',
    scope:{},
    link: function (scope,element,attrs) {

      //Code goes here

    }
  }
})
.directive('click-trigger',function($rootScope) {
  return {
    restrict:'E',
    link: function(scope,element,attrs) {

      element.bind('click',callBackFunction);

      function callBackFunction () {
        //callback
      }

    }
  }
})

Answer 1

这样更干净。一切都是分开的，你不要将javascript与HTML混合。在vanilla JS中也可以看到这种趋势，你没有在元素上设置DataWriterImplementor属性，但在加载时（或者在JS代码中的任何地方）你onclick。

Answer 2

在我看来，更多角度方式是将嵌套元素包含在模板中。

.directive('foo', function(){
                return {                 
                 template:'<button ng-click="clickMe()">Click Me</button>'               
                }                
            })

您的方法的问题是嵌套的DOM元素属于指令的范围 - 而不是控制器的范围。如果您正在尝试创建隔离范围，则可以非常轻松地陷入混乱。

请注意，当涉及孤立的范围时，角度会以奇怪的方式表现。在我看来，这是不必要的复杂。

请研究this问题。

Answer 3

在click中使用directive事件会使代码与正在调用的控制器松散耦合。如果有多个控制器关联并且使用了相同的directive(s)，那么代码就变得多余了。因此，更智能的方法是在AngularJS自定义指令本身中定义click event。此外，当与AngularJS的DOM交互时，这并不容易，所以通过这种方式，它为此铺平了道路。

AngularJS将角度指令中的点击绑定到ng-click有什么好处？

实施例

我如何编写指令

多数人如何撰写指令

3 个答案: