Javascript 如何在页面中滚动或调整指令更新的大小
我有一个指令,它将两个类设置为一个元素,以标识它在浏览器窗口中的象限(左上角、右上角、左下角、右下角)。代码与此类似:Javascript 如何在页面中滚动或调整指令更新的大小,javascript,angularjs-directive,Javascript,Angularjs Directive,我有一个指令,它将两个类设置为一个元素,以标识它在浏览器窗口中的象限(左上角、右上角、左下角、右下角)。代码与此类似: angular.module('positionerDirective', []) .directive('positioner', function() { return { restrict: 'A', link: function(scope, element){ var top = element[0].offsetT
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);
}
};
});
我的问题是,如果用户滚动或更改屏幕大小,象限可能会更改,如果发生这种情况,我需要更新类。因此,我的问题是,如果左/上方向发生变化,如何使指令再次运行 您可以将控制器添加到指令中,在指令中订阅
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
}]
};
});
角度模块('positionerDirective',[])。
指令('定位器',函数(){
返回{
限制:“A”,
范围:正确//