取消绑定 ng-click 以获取角度中的动态 dom 元素

Posted

技术标签:

【中文标题】取消绑定 ng-click 以获取角度中的动态 dom 元素【英文标题】:Unbind ng-click for dynamic dom element in angular 【发布时间】:2013-10-19 04:38:10 【问题描述】:

我有一个动态 div,它有条件地推入 dom。我有一个 ng-click 事件绑定到触发 myfunc() 的 div 内的子元素。现在,当该 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>

【问题讨论】:

如何将这个动态 div 添加到 DOM 中? 我没有直接添加..infowindow实际上是由第三方api添加的 @Chandermani :我刚刚检查过,我每次都调用 $compile 来编译 infowindow 的内容,然后再将其推送到 dom 中。这会导致问题吗 是的,这可能是问题所在。编译内容后,请保留对链接函数的引用。当你想把它推入 dom 时,用 scope 参数调用它,问题就会得到解决。 我看到它已经完成了。这里是代码 infoWindow.open = function open(map, anchor) $compile(element.contents())(scope); _open.call(infoWindow, 地图, 锚点); ; 【参考方案1】:

使用 $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=51 http://makandracards.com/makandra/15851-angularjs-access-the-scope-for-a-rendered-dom-element

【讨论】:

以上是关于取消绑定 ng-click 以获取角度中的动态 dom 元素的主要内容,如果未能解决你的问题,请参考以下文章

如果已经以相同的请求运行,则取消订阅/取消角度4中的现有HTTP / XHR调用

带单选按钮的角度动态 html 绑定

angularjs中动态为audio绑定src问题总结

如何将值绑定到角度下拉列表以编辑某些数据

Angularjs ng-click:如何获取`this`数据?

Apache Zeppelin python到角度绑定不会一直发生,取消绑定会出错