指令重复使用时将创建多个绑定

Multiple bindings are being created when directive reused

本文关键字：创建 绑定 指令      更新时间：2023-09-26

我正试图让一个无穷大加载指令发挥作用。所以我为窗口滚动事件创建了一个绑定，如下所示。

    angular.element($window).bind('scroll',function()
    {
        _onScroll($scope);
    });

在我的_onScroll方法中，我像这样登录到控制台的滚动位置。

    var $wnd = angular.element($window);
    var pageTop = $wnd.scrollTop() + $wnd.height();
    var markerTop = $loadMore.offset().top;
    console.log('pageTop: '+pageTop+' markerTop: '+markerTop);

除非我导航到应用程序的另一个部分，然后返回到带有无穷大指令的页面，否则这是有效的。

问题是_onScroll被称为重复次数。每次我导航回无穷大指令时，都会向_onScroll 添加一个额外的调用

例如；

我第一次看到控制台。

pageTop: 300 markerTop: 1000
pageTop: 600 markerTop: 1000
pageTop: 900 markerTop: 1000

第二次，我将看到每个滚动事件打印两行，如下所示。

pageTop: 300 markerTop: 1000
pageTop: 300 markerTop: 1000
pageTop: 600 markerTop: 1000
pageTop: 600 markerTop: 1000
pageTop: 900 markerTop: 1000
pageTop: 900 markerTop: 1000

等等…

angular.element($window).bind(..)似乎是持久的，当指令不再使用时，我需要以某种方式解除它的绑定。

我该怎么做？需要注意的是，这个指令没有一个独立的作用域，所以我不能看着作用域被破坏。

您可以绑定到指令中的jQuery destroy事件：

element.on('$destroy', function() {
    // unbind
});
相关文章：