课堂评估时间太长。 AngularJS

Question

我在玩粘性导航。 问题是fixed / static类对的评估/应用花费的时间太长。

标记看起来像这样：

<div id="header" ng-controller="navController">
    <div id="logo">
        <a href="#"><img src="@Url.Content(@"~/assets/img/logotype.png")" alt="logo" /></a>
    </div>
    <ul ng-class="{fixed: useFixedPosition, static: !useFixedPosition}">
        <li><a href="#" class="home">Services</a></li>
        <li><a href="#">Equipment</a></li>
        <li><a href="#">Prices</a></li>
        <li><a href="#">Contacts</a></li>
    </ul>
</div>

#header ul.fixed { position: fixed; top: 0; width: 100%; }
#header ul.static { position: static; }

控制器代码如下：

app.controller('navController', ['$scope', '$document', function($scope, $document) {
    $scope.useFixedPosition = false;
    $document.on('scroll', function() {
        $scope.useFixedPosition = $document.scrollTop() > 385;
    });
}]);

我正在使用angular-scroll插件（ https://github.com/durated/angular-scroll ）

我究竟做错了什么？

编辑

感谢@Plantface，这里有一个小提琴： http : //jsfiddle.net/ud7k2po1/11 。

Answer 1

简短的答案：您应该在滚动事件结束时调用$scope.$apply() 。

更长的答案：如果没有运行摘要循环，则不会运行负责与DOM进行双向绑定的观察者。 由于.on()方法在jQuery或jQLite中，因此它们似乎不了解$ scope。

但是，对每个滚动事件运行脏检查不是很有效，因此最好在没有ng-class的指令中进行DOM操作，如下所示：

app.directive('floatingNav', 
  function($document) {
    return {
      link : function($scope, $element, $attr) {
        var breakpoint = ($attr.floatingNav ? parseInt($attr.floatingNav) : 200);
        var isFloating = false;
        $document.on('scroll', function(){
          if(!isFloating && $document.scrollTop() >= breakpoint) {
            $element.addClass('floating');
            isFloating = true;
          } else if(isFloating && $document.scrollTop() < breakpoint) {
            $element.removeClass('floating');
            isFloating = false;
          }
        });
      }        
    }
  });

更换你.fixed风格.floating （删除.static ，因为它是多余的），并使用它像这样：

<ul floating-nav="385">…</ul>