最近在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);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。