角度ng-click事件委托

Question

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

Answer 1

似乎angular不会使用中继器进行事件委派.有人在github上打开了一个关于它的问题.争论的焦点是它是否真的能带来更好的表现.

可能有一个解决方法,但它需要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方法,因为我从一个更复杂的应用程序中提取了它.