最近在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);