angular指令中事件被多次绑定的问题追究

发布时间:2019-06-28 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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,请注明来意。