因此,如果我有一个带有100 li的ul,则每个li都应该有ng- clicks或是否有办法将事件绑定到ul并将其委派给li的jquery的工作方式?这会好还是坏?我们有100个事件,还是最后只有一个事件?
似乎angular并没有使用中继器进行事件委派。有人在github上发布了一个关于它的问题。争论在于它是否实际上会带来更好的性能。
可能有解决方法,但需要jQuery。它包括创建要在父元素上使用的特殊指令,并在其dom节点上注册侦听器。
这是一个示例,该示例传递了单击子节点时要调用的函数名称,还传递了选择器以帮助识别要收听的子节点。由于angular的jquery实现仅提供给我们bind方法- 仅限于将事件侦听器注册到实际元素-我们需要加载jQuery才能访问onor delegate方法。
bind
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将表达式转换为将从事件侦听器调用的函数。
$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: '&'},这值得一看,但这会增加复杂性。
{fun: '&'}