Question

在我的一个指令中，我使用angular.element($window).bind('scroll')。当指令被销毁时，我想要unbind它。通常情况下，我会这样做：

$scope.$on('$destroy', function()
{
    angular.element($window).unbind('scroll');
});

但是，如果另一个指令也绑定到scroll的{{1}}事件，该事件仍然需要存在。如果我使用上面的$window，那么另一个指令的绑定也会被删除。

我有什么选择？

Answer 1

在传递给bind / on时，将相同的函数引用传递给unbind / off，以取消绑定该特定的处理程序：

var fn = function () {};

angular.element($window).on('scroll', fn);

angular.element($window).off('scroll', fn);

例如：

var onScrollAction = function () {
  // Do something 
};

angular.element($window).on('scroll', onScrollAction);

scope.$on('$destroy', function () {

  angular.element($window).off('scroll', onScrollAction);
});

请注意，在jQuery中，不推荐使用函数bind和unbind。但是你仍然可以在jQuery和jqLite中使用它们，因为它们只是在幕后调用on和off。

Answer 2

JQuery的on()支持命名空间事件，因此可以相互独立地删除它们。
（https://api.jquery.com/on/）

然而，Angular的jqLite却没有。
（https://docs.angularjs.org/api/ng/function/angular.element）

但是如果你在Angular之前包含JQuery，那么JQuery将取代jqLite，你应该能够使用命名空间。这可能不是你想听到的，但我不知道其他任何方式。

Answer 3

只是为了更清楚它将如何进入指令在链接函数中使用此确保将它附加到write元素，例如它附加到文档

                //attach event to document which is big thing
                //make sure we remove it once we done with this
                $document.on('keydown', handler);

                //We need to remove this event as it should be only applicable when user is withing 
                //the scope of directive parent
                scope.$on("$destroy", function () {
                    $document.off('keydown', handler);
                });
                //function gets executed when we hit the key specified from form
                function handler (event) {
                }

Answer 4

绑定：

解除绑定：

$window.onscroll = function() {
//your code
};

AngularJS - 解除特定指令中事件的$窗口

4 个答案: