类评估花费的时间太长。 AngularJS答案

【问题标题】：Class evaluation takes too long. AngularJS类评估花费的时间太长。 AngularJS
【发布时间】：2014-09-18 11:32:09
【问题描述】：

我在玩粘性导航。问题是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。

【问题讨论】：

你能在 jsFiddle 中重现吗？
我很想，但我不知道如何引用 jsfiddle 中的插件。我没有在 jsdelivr 找到它？有什么想法吗？
“慢”到底是什么意思？您遇到的实际症状是什么？是类本身应用慢，还是触发的效果慢？它们是两种不同的东西。
条件 ($scope.useFixedPosition = $document.scrollTop() > 385;) 的评估速度相当快。但是将固定位置应用于给定的 ul 大约需要 4-5 秒。应用（确切）类需要很长时间。
@lexeme 您可以从 github 获取分发文件并使用 GitRaw 找到在 jsFiddle 中有效的 URL。你可以 fork 这个example 我为你做的，并尝试让它与你的代码一起工作。

标签： javascript angularjs scroll navigation

【解决方案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;
          }
        });
      }        
    }
  });

用.floating 替换您的.fixed 样式（删除.static，因为它是多余的）并像这样使用它：

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

【讨论】：