angularjs – 角点击事件委托

前端之家收集整理的这篇文章主要介绍了angularjs – 角点击事件委托前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
所以如果我有一个ul与100李的应该有ng点击每个li或有一种方式绑定事件到ul和委托它的li的类型什么jquery?这会更好还是更坏?我们有100个事件还是最后只是一个事件?
似乎角不做事件委托与中继器。有人打开了一个 issue on github about it.的论点是如果它实际上导致更好的性能

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

这里有一个例子,它传递一个函数名,当孩子节点被点击时被调用,并且还传递一个选择器来帮助识别要监听的子节点。
因为angular的jquery实现只给我们绑定方法 – 这是限制注册事件侦听器实际元素 – 我们需要加载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:’&’}委派给指令,这是值得一看,但这增加了复杂性。

猜你在找的Angularjs相关文章