如何安全地清理指令中的 AngularJS 事件绑定

Question

我有一个 Angular 指令，它将元素的高度设置为等于浏览器窗口的内部高度（+/- 给定的偏移量）。该指令响应窗口的“resize”事件并相应地调整其高度。当我的指令的范围发出 '$destory' 事件时，我删除了对“resize”事件的绑定（我认为将其保留在适当的位置会导致一些问题，如果我错了，请纠正我）。

我不知道如何以“安全”的方式进行此事件分离。如果我在整个应用程序中有多个该指令的实例，并且如果我有附加到“调整大小”事件的其他指令怎么办？

JQuery 具有事件命名空间的概念，这似乎是一个很好的解决方案，但 Angular 的实现 (JQLite) does not support this。我宁愿不使用 JQuery，因为我已经在使用 Angular，那我该怎么办？

这是我今天的指令的代码

window.angular.module('arcFillClient', [])
    .directive('arcFillClientY', ['$window',
        function ($window) {

            function link($scope, el, attrs) {

                var setHeight,
                    onResize,
                    cleanUp;

                setHeight = function (offSetY) {
                    var newHeight;
                    offSetY = offSetY || 0;
                    newHeight = Math.max($window.innerHeight + parseInt(offSetY, 10)) + 'px';
                    el.height(newHeight);
                };

                onResize = function () {
                    var offset;
                    offset = attrs.arcFillClientY || 0;
                    setHeight(offset);
                };

                attrs.$observe('arcFillClientY', setHeight);
                window.angular.element($window).on('resize', onResize);

                cleanUp = function () {
                    window.angular.element($window).off('resize');
                };

                $scope.$on('$destroy', cleanUp);
            }
            return {
                link: link
            };

更新 看起来像 RTFM 的情况，但以防万一其他人在这里徘徊，这里有更多信息。将原始函数（在我的情况下为 OnResize）传递给 .off() 可以隔离 .off() 函数的范围。来自docs：

也可以通过在处理程序参数中指定函数名称来删除处理程序。当 jQuery {ahem... JQLite} 附加一个事件处理程序时，它会为处理程序函数分配一个唯一的 id。

这是我指令中更新的cleanUp 函数：

cleanUp = function () {
    window.angular.element($window).off('resize', onResize);
};

感谢 tasseKATT、Karolis 和 Hans 的贡献。

Answer 1

将相同的函数引用传递给off，就像传递给on：

window.angular.element($window).off('resize', onResize);

代替：

window.angular.element($window).off('resize');

演示 - 将函数引用传递给 off：http://plnkr.co/edit/1rfVPNXl6TrEcuYvzPAj?p=preview

演示 - 不将函数引用传递给 off：http://plnkr.co/edit/IsLqSLAzNcHqDnhMty7Q?p=preview

演示包含两个监听窗口调整大小事件的指令。使用代码和预览之间的垂直分隔符来触发事件。

您会注意到，如果您销毁其中一个，则在将函数引用传递给 off 时，另一个将继续工作。否则，两者都将停止工作。

Answer 2

几周前我也有同样的问题。

查看jqLit​​e源码（https://github.com/angular/angular.js/blob/master/src/jqLite.js）后，我们看到on方法添加了事件，off方法通过jqLiteOff函数删除了事件。

深入观察，我们看到jqLiteRemoveData 调用jqLiteOff。 jqLiteRemoveData 由 jqLiteDealoc 调用。 jqLiteDealoc 在几个地方被调用：jqLiteEmpty、html、replaceWith 和 remove。 jqLiteEmpty 被分配给元素的 empty 方法，该方法清除 jQuery 中的元素。 html、replaceWith 和 remove 是 jQuery 模仿对象。

搜索remove() 在元素上的调用位置，我们发现它用于大多数（如果不是全部）DOM 操作逻辑。您可以在ngIf、ngSwitch、ngInclude 和ngView 中看到它。

所以我认为 Angular 确实会处理事件侦听器清理，只要您使用 jqLit​​e 附加事件并在您自己的 DOM 操作逻辑中适当地调用 remove()。使用 jQuery 包装元素会搞乱很多流程，包括事件侦听器清理，但我想您已经完全意识到这一点，因为您使用的是 angular.element。

Answer 3

首先，同时使用 JQuery 和 AngularJS 绝对没有错。

除此之外，我喜欢做的是有一个body 指令来监听window.on('resize', ...) 并将大小写入$rootScope.windowSize。然后在元素上设置另一个指令 $watch("windowSize", ...) 并根据需要设置为宽度。 （您实际上不必在 $scope 中公开大小 - 您可以改为使用 require）。