angularjs - Angular ng-click 事件委托(delegate)

Question

所以，如果我有一个有 100 个 li 的 ul，每个 li 中应该有 ng-clicks，还是有办法将事件绑定(bind)到 ul 并将其委托(delegate)给 li 的 jquery 所做的事情？这会更好还是更糟？我们有 100 个事件还是最终只有一个事件？

Answer 1

似乎 Angular 没有使用中继器进行事件委托(delegate)。有人打开了issue on github about it 。争论的焦点是它是否真的能带来更好的性能。

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

这是一个示例，它传递了一个在单击子节点时要调用的函数名称，并且还传递了一个选择器以帮助识别要监听的子节点。由于 Angular 的 jquery 实现只为我们提供了 bind 方法 - 仅限于将事件监听器注册到实际元素 - 我们需要加载 jQuery 才能访问 on 或委托(delegate)方法。

HTML

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

定义的函数是在 Controller 中定义的，并且期望传递一个索引

$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

<小时/>

注意:可以使用隔离作用域将函数委托(delegate)给指令{fun: '&'}，这值得一看，但这会增加复杂性。