我有一个指令,它将两个类设置为一个元素,以识别它在浏览器窗口中的哪个象限(左上、右上、左下、右下)。代码类似于:
angular.module('positionerDirective', [])
.directive('positioner', function() {
return {
restrict: 'A',
link: function(scope, element){
var top = element[0].offsetTop;
var left = element[0].offsetLeft;
//do whatever math you need here
angular.element(element).addClass(class you need);
}
};
});
我遇到的问题是,如果用户滚动或更改屏幕尺寸,象限可能会发生变化,如果发生这种情况,我需要更新类。所以我的问题是,如果左侧/顶部发生变化,如何使指令再次运行?
最佳答案
您可以将 Controller 添加到指令中,在其中订阅 resize
和 scroll
的 DOM 事件,并相应地更新类。这是执行此操作的示例:
JavaScript
angular.module('positionerDirective', []).
directive('positioner', function() {
return {
restrict: 'A',
scope: true, // <- create isolated scope
link: function(scope, element) {
var el = element[0];
scope.$watch(function() {
return (el.offsetTop - scope.scrollTop)+':'+(el.offsetLeft - scope.scrollLeft); // <- check element class is to be updated
}, function() {
el.className = 'top-'+(el.offsetTop - scope.scrollTop)+' left-'+(el.offsetLeft - scope.scrollLeft); // <- apply new element class
});
},
controller: ['$scope', '$window', function($scope, $window) {
$scope.updatePosition = function() {
$scope.scrollTop = $window.document.body.scrollTop,
$scope.scrollLeft = $window.document.body.scrollLeft;
if ($scope.$root.$$phase != '$apply' && $scope.$root.$$phase != '$digest') { // <- Avoid call of $apply while digest is already running
$scope.$apply();
}
}
angular.element($window).on('resize scroll', function() { // <- subscribe to DOM events and update scope accordingly
$scope.updatePosition();
});
$scope.updatePosition(); // <- set initial values of $scope.scrollTop and $scope.scrollLeft
}]
};
});
关于javascript - 如何在页面滚动或调整大小时更新指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22526313/