Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 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);
- }
- };
- });
- 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
- }]
- };
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement