我有一个动态的div,它被有条件地推入dom。我有一个 ng-click 事件绑定到div 内的子元素,该子元素触发 myfunc() 。现在,当该div 被删除并重新添加到 dom 中时,myfunc() 被触发两次。myfunc 被称为div 被删除和重新添加的次数。看起来我甚至需要在子元素上取消绑定 ng-click。
<div gm-info-window="infoWindow" gm-on-closeclick="infoWindowClosed()">
<div>
<b>{{category}}</b>
<p>{{subcategory}}</p>
<b ng-show="dateString != null"> {{dateString}}</b>
<p >{{place}}</p>
<a ng-show="hasDescription != false" ng-click="myfunc()">View Description</a>
</div>
</div>
使用 $compile 动态插入 dom 可能会发生内存泄漏。现有 dom 可以替换为新的 dom 元素,而与旧 dom 关联的范围仍然存在,这意味着所有监视和事件侦听器仍然存在。
安全的方法是:
- 为我们要动态插入的 dom 创建一个新的子作用域。
- 检查 dom 是否要替换现有的。并首先销毁与之关联的现有范围。
- 使用新的子作用域作为参数编译新的 dom。
像这样:
var newScope = parentScope.$new(), //parentScope is the scope you are going to add dom under it
$el=$(content);
if ($el) { //same dom already exist?
var existingScope = $el.scope(); //any scope associated?
if (existingScope) {
existingScope.$destroy();
}
}
$compile(content)(newScope);
参考资料: http://roubenmeschian.com/rubo/?p=51http://makandracards.com/makandra/15851-angularjs-access-the-scope-for-a-rendered-dom-element