jquery - 取消绑定(bind) ng-click 以 Angular 动态 dom 元素

Question

我有一个动态 div，它有条件地插入 dom。我有一个 ng-click 事件绑定(bind)到 div 内的子元素，该事件触发 myfunc() 。现在，当该 div 被删除并重新添加到 dom 时， myfunc() 会被触发两次。 myfunc 被称为 div 被删除和重新添加的次数。看起来我甚至需要在子元素上取消绑定(bind) 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>

Answer 1

使用 $compile 动态插入 dom 可能会导致内存泄漏。现有的 dom 可以替换为新的 dom 元素，而与旧 dom 关联的作用域仍然存在，这意味着所有监视和事件监听器仍然存在。

安全的方法是:

1. 为我们要动态插入的 dom 创建一个新的子作用域。
2. 检查 dom 是否会替换现有的 dom。并首先销毁与其关联的现有作用域。
3. 使用新的子作用域作为参数编译新的 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=51 http://makandracards.com/makandra/15851-angularjs-access-the-scope-for-a-rendered-dom-element