脚本宝典收集整理的这篇文章主要介绍了angular指令中事件被多次绑定的问题追究,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
最近在Angular项目实施中,自定义了指令ui-tree指令,在测试阶段发现了一个问题:
先来描述一下指令作用:在指令初始化时向服务器请求树的第一层级数据,当点击某个节点的时候,触发click事件向服务器请求对应的子节点数据,将拿到的数据通过拼接htML字符串的方式组合,element.apPEnd到当前的节点上。然后通过$compile服务对数据进行绑定渲染到页面。关键代码如下:
element.append(subMenuTemplate);
$compile($("[fatid]"))(scope); //根据属性进行编译
在测试阶段发现了一个问题,当我点击某个节点的时候会触发多次click事件,并且当我点击的层级越深自动出发的click次数越多。
原因:我的代码在$compile编译过程中会给传递进去的Dom元素绑定了click事件,当我点击一次节点,$compile执行一次,对应的执行一次绑定事件。如果$compile中传参是同一个Dom,就会变成一个Dom节点被绑定了多次事件。所以会发生在测试阶段一次点击触发多次执行的问题。
修改方案:每次编译只对新生成的节点,这样可以避免被多次绑定同一事件。
修改之后的代码:
$compile(element.find("[fatid]"))(scope);
以上是脚本宝典为你收集整理的angular指令中事件被多次绑定的问题追究全部内容,希望文章能够帮你解决angular指令中事件被多次绑定的问题追究所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。