角ng-click事件委托

Question

因此，如果我有一个带有100 li的ul，则每个li都应该有ng-
clicks或是否有办法将事件绑定到ul并将其委派给li的jquery的工作方式？这会好还是坏？我们有100个事件，还是最后只有一个事件？

Answer 1

似乎angular并没有使用中继器进行事件委派。有人在github上发布了一个关于它的问题。争论在于它是否实际上会带来更好的性能。

可能有解决方法，但需要jQuery。它包括创建要在父元素上使用的特殊指令，并在其dom节点上注册侦听器。

这是一个示例，该示例传递了单击子节点时要调用的函数名称，还传递了选择器以帮助识别要收听的子节点。由于angular的jquery实现仅提供给我们bind方法-
仅限于将事件侦听器注册到实际元素-我们需要加载jQuery才能访问onor delegate方法。

的HTML

<ul click-children='fun' selector='li'>
    <li ng-repeat="s in ss" data-index="{{$index}}">{{s}}</li>
</ul>

定义的函数在控制器中定义，并且期望传递给索引

$scope.fun = function(index){
    console.log('hi from controller', index, $scope.ss[index]);      
};

该指令用于$parse将表达式转换为将从事件侦听器调用的函数。

app.directive('clickChildren', function($parse){
  return {
    restrict: 'A',
    link: function(scope, element, attrs){       
      var selector = attrs.selector;
      var fun = $parse(attrs.clickChildren);   
      element.on('click', selector, function(e){       
        // no need to create a jQuery object to get the attribute 
        var idx = e.target.getAttribute('data-index');        
        fun(scope)(idx);        
      });
    }
  };
});

柱塞：http
://plnkr.co/edit/yWCLvRSLCeshuw4j58JV?p=preview

注意：可以使用isolate作用域将函数委派给指令{fun: '&'}，这值得一看，但这会增加复杂性。