ng-class 滚动时不更新

Question

我想根据用户位置和滚动位置更改导航栏的背景。基本上，如果用户在除根以外的任何页面上，它将被填充，如果他们在根上，如果他们滚动超过他们 window 的整个高度，它将被填充（因为这是我的高度header).

我的 angular 代码似乎工作正常，因为我的 console.log 输出正确。但是 .fill class 似乎没有被应用！相反，它仅在 .open class 应用后应用（单击菜单按钮时），然后在用户向上滚动时不会被删除！

这是我的导航栏指令代码。

angular.module('lumbajackApp')
  .directive('navbar', function ($location, $window) {
    return {
     templateUrl: 'app/navbar/navbar.html',
     restrict: 'EA',
     link: function (scope, elem, attr) {
      var ngwindow = angular.element($window);
      var height = $window.innerHeight;
      var scrollPos = 0;

      ...omitted... 

      ngwindow.bind('resize', function(){
        height = $window.innerHeight;
      });
      scope.isFilled = false;

      if ($location.path() === '/') {
        ngwindow.bind('scroll', function(){
          scrollPos = this.pageYOffset;
          if (scrollPos > height){
            scope.isFilled = true;
            console.log(scope.isFilled);
          } else {
            scope.isFilled = false;
            console.log(scope.isFilled);
          }
        });
      } else {
        scope.isFilled = true;
      }
    }
  };
});

这里是 html 的片段：

<div class="top-nav" ng-class="{'fill':isFilled, 'open':!isCollapsed}">
  ...
</div>

最后，我的 SCSS 片段

/* Nav states */

.top-nav.fill {
  background: url(/assets/images/pattern2.png) repeat;
  background-size: 1000px;
}

.top-nav.open {
  background: rgba(0,0,0,0.6);
  height: 100%;
}

Answer 1

Angular 摘要循环不会在您的 window.scroll.

上执行

您需要通知 angular 到运行摘要周期。

更新范围变量后，通知angular更新视图。在滚动处理程序的末尾写入以下行。

 scope.$apply();

ng-class 滚动时不更新

ng-class not updating on scroll

angularjs

sass