Угловая директива прокрутки

Question

Я пытаюсь создать директиву с двумя параметрами, классом и страницейYOffset. Я хотел бы проверить положение прокрутки моего элемента и добавить имя класса, если pageYOffset больше, чем число в attr. Почему-то я не могу вызвать изменения класса.

HTML

<div scroll offset="1500" ng-class="{active : scrollClass}"></div> 

Директива

app.directive('scroll', function($window) { 
    return { 
     scope: { 
      offset: "@offset" 
     }, 
     link: function (scope, element, attr) { 
      angular.element($window).bind("scroll", function() { 
       if (this.pageYOffset >= scope.offset) { 
        scope.scrollClass = true; 
       } 
       scope.$apply(); 
      }); 
     } 
    } 
}); 

Answer 1

Как вы используете изолированный класс, ваша директива сфера отличается сфера, чем контроллер сферы, сфера управления не получит в наследство директивы сферы, потому что scope: {..}, как вы хотите изменить флаг родительской области вам необходимо пройти это значение внутри вашей директивы с =, которое будет выполнять двустороннюю привязку, поскольку изменение переменной внутренней области повлияет на значение переменной родительского объекта.

Makrup

<div scroll offset="1500" scroll-class="scrollClass" ng-class="{active : scrollClass}"></div> 

Директива

app.directive('scroll', function($window) { 
    return { 
     scope: { 
      offset: "@offset", 
      scrollClass: '=' 
     }, 
     link: function (scope, element, attr) { 
      angular.element($window).bind("scroll", function(event) { 
       if (element.pageYOffset >= scope.offset) { 
        //this will change the parent scope variable value to true 
        scope.scrollClass = true; 
       } 
       scope.$apply(); //need full to run digest cycle 
      }); 
     } 
    } 
}); 

Answer 2

Вы можете попробовать что-то вроде tihs:

app.directive('scroll', function($window) { 
    return { 
     scope: { 
      offset: "@offset", 
      toggleScroll: "&toggle" 
     }, 
     link: function (scope, element, attr) { 
      angular.element($window).bind("scroll", function() { 
       if (this.pageYOffset >= scope.offset) { 
        toggle(); 
       } 
       //scope.$apply(); 
      }); 
     } 
    } 
}); 

<div scroll offset="1500" toggle-scroll="changeActiveClass()" ng-class="{active : scrollClass}"></div> 

Затем определить changeActiveClass в вашей родительской области:

$scope.changeActiveClass = function() { 
    $scope.scrollClass = !scrollClass; 
}