javascript - 如何安全地清理指令中的 AngularJS 事件绑定(bind)

Question

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

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

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 :

A handler can also be removed by specifying the function name in the handler argument. When jQuery {ahem... JQLite} attaches an event handler, it assigns a unique id to the handler function.

这是我的指令中更新的 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');

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

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

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

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