javascript - 类(class)评价时间太长。 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; }

Controller 代码如下所示:

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，有一个 fiddle :http://jsfiddle.net/ud7k2po1/11 .

Answer 1

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

更长的答案:如果摘要周期没有运行，那么负责与 DOM 双向绑定(bind)的观察者就不会运行。由于 .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>