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);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!