Угловое положение обновления в реальном времени

Question

Я пытаюсь выполнить обнаружение прокрутки, которое обновит положение элемента при прокрутке.

JS код:

angular.directive('menu', ['$window', function($window){ 
    return function (scope, element) { 
     var w = angular.element($window); 
     var top = element.offset().top; 

     w.bind('scroll', function() { 
      adjustHeight(); 
     }); 

     function adjustHeight(){ 
      var newtop = top - w.scrollTop(); 
      if(newtop>0){ 
       scope.top = top - w.scrollTop(); 
      }else{ 
       scope.top = '0'; 
      } 
     } 
    }; 
}]); 

HTML:

<div ng-style="{'top':top}" menu></div> 

Позиция обновляется только после того, как прокрутка останавливается. Как я могу получить обновление в режиме реального времени?

Answer 1

Вы должны сказать Angualar о своих изменениях, чтобы он мог применить его:

w.bind('scroll', function() { 
    adjustHeight(); 
    scope.$apply(); 
}); 

Answer 2

Как adjustheight обработчик события проходит за пределами углового масштаба. Целесообразно использовать область действия. $ Подать заявку на это.

Также лучше назначить w.scrollTop(); переменной для повышения производительности.

angular.directive('menu', ['$window', function($window){ 
    return function (scope, element) { 
     var w = angular.element($window); 
     var top = element.offset().top; 

     w.bind('scroll', function() { 
      scope.$apply(adjustHeight); // pass the adjustheight function to scope.$apply. 

     }); 

     function adjustHeight(){ 
      var scrolltop = w.scrollTop(); 
      var newtop = top - scrolltop; 
      if(newtop>0){ 
       scope.top = top - scrolltop; 
      }else{ 
       scope.top = '0'; 
      } 
     } 
    }; 
}]);