Question

所以，如果我有一个100 li的ul应该在每个li中有ng-clicks，或者有没有办法将事件绑定到ul并将其委托给li的那种jquery呢？这会更好还是更糟？我们有100个活动还是最后只有一个活动？

Answer 1

似乎角度没有用中继器进行事件委托。有人打开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>

定义的函数在控制器中定义，它希望传递一个索引

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

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

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

Answer 2

在这里使用jm的例子，我写了一个更简洁灵活的指令版本。以为我会分享。归功于jm-;）

我的版本尝试将函数名称调用为$ scope [fn]（e，data），或者正常失败。

它从被单击的元素传递可选的json对象。这允许您使用Angular表达式并将许多属性传递给被调用的方法。

HTML

<ul delegate-clicks="handleMenu" delegate-selector="a">
  <li ng-repeat="link in links">
    <a href="#" data-ng-json='{ "linkId": {{link.id}} }'>{{link.title}}</a>
  </li>
</ul>

的Javascript

控制器方法

$scope.handleMenu = function($event, data) {
  $event.preventDefault();
  $scope.activeLinkId = data.linkId;
  console.log('handleMenu', data, $scope);
}

指令构造函数

// The delegateClicks directive delegates click events to the selector provided in the delegate-selector attribute.
// It will try to call the function provided in the delegate-clicks attribute.
// Optionally, the target element can assign a data-ng-json attribute which represents a json object to pass into the function being called. 
// Example json attribute: <li data-ng-json='{"key":"{{scopeValue}}" }'></li>
// Use case: Delegate click events within ng-repeater directives.

app.directive('delegateClicks', function(){
  return function($scope, element, attrs) {
    var fn = attrs.delegateClicks;
    element.on('click', attrs.delegateSelector, function(e){
      var data = angular.fromJson( angular.element( e.target ).data('ngJson') || undefined );
      if( typeof $scope[ fn ] == "function" ) $scope[ fn ]( e, data );
    });
  };
});

如果有人愿意做出贡献，我很乐意听到反馈。

我没有测试handleMenu方法，因为我从一个更复杂的应用程序中提取了它。

Answer 3

从BradGreens开始＆＃39; delegateClicks上面，我已经改编some code from georg，它允许我在$ scope中更深入地放置handleMenu函数（例如$ scope.tomato.handleMenu）。

app.directive('delegateClicks', function () {
    return function ($scope, element, attrs) {
        var fn = attrs.delegateClicks.split('.').reduce(function ($scope, p) { return $scope[p] }, $scope); 
        element.on('click', attrs.delegateSelector, function (e) {
            var data = angular.fromJson(angular.element(e.target).data('ngJson') || undefined);
            if (typeof fn == "function") fn(e, data);
        });
    };
});

Answer 4

根据issue on GitHub，委派事件处理没有性能优势。

只需将ng-click伪指令与项目$index和$event一起使用：

<ul>
   <li ng-repeat="item in collection"
       ng-click="lineClicked(item, $index, $event)">
      {{item}}
   </li>
</ul>

$scope.lineClicked = function(item, index, event) {
    console.log("line clicked", item, index);
    console.log(event.target)
});

有关更多信息，请参见

角度ng-click事件委托

4 个答案: