javascript – 如何安全地清理指令中的AngularJS事件绑定 - 代码日志

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

我有一个Angular指令,它设置一个元素的高度等于浏览器窗口的内部高度(/ – 给定的偏移量)。该指令响应窗口的“调整大小”事件并相应调整其高度。当我的指令的范围发出“$ 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
            };

UPDATE看起来像一个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);
};

感谢KATT,Karolis和Hans的贡献。

传递相同的功能引用关闭:

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

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

你会注意到,如果你摧毁一个,另一个将继续工作,当传递函数引用关闭。如果不这样做,两者都会停止工作。

http://stackoverflow.com/questions/23031381/how-to-safely-clean-up-angularjs-event-binding-in-a-directive

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:javascript – 如何安全地清理指令中的AngularJS事件绑定