我有一个Angular指令,该指令将元素的高度设置为等于浏览器窗口的内部高度(+/-给定的偏移量)。该指令响应窗口的“调整大小”事件,并相应地调整其高度。当指令的作用域发出’$
destory’事件时,我将删除对“ resize”事件的绑定(我认为将其留在原地会引起一些问题,如果我错了,请纠正我)。
我不知道如何以“安全”的方式执行此事件分离。如果我在整个应用程序中都有该指令的多个实例,又如果我有其他附加到’resize’事件的指令怎么办?
JQuery具有事件名称空间的概念,这似乎是一个很好的解决方案,但是Angular的实现(JQLite)不支持此方法。我宁愿不使用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()函数的范围。从文档:
还可以通过在处理程序参数中指定函数名称来删除处理程序。当jQuery {ahem …
JQLite}附加事件处理程序时,它将为处理程序函数分配一个唯一的ID。
这是cleanUp我指令中的更新函数:
cleanUp = function () {
window.angular.element($window).off('resize', onResize);
};
感谢tasseKATT,Karolis和Hans的贡献。