取消绑定 - 单击角度中的动态dom元素

时间:2013-10-11 07:17:56

标签: jquery angularjs angularjs-directive angularjs-scope angularjs-ng-click

我有一个动态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>

1 个答案:

答案 0 :(得分:0)

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

安全的方法是:

  1. 为我们要动态插入的dom创建一个新的子范围。
  2. 检查dom是否要替换现有的dom。并首先破坏与之相关的现有范围。
  3. 使用新的子范围作为参数编译新的dom。
  4. 这样的事情:

    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