Javascript 课堂评估时间太长。安格拉斯

我在玩粘性导航。问题是

固定的

/

静态的

类对的评估/应用耗时太长

标记如下所示：

<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;
    });
}]);

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;
          }
        });
      }        
    }
  });

我正在使用

angular scroll

plugin（）

我做错了什么

编辑

---

感谢@Plantface，这里有一把小提琴：。

简短回答：您应该在滚动事件结束时调用

$scope.$apply（）

更详细的回答：如果摘要周期没有运行，那么负责与DOM双向绑定的观察者就不会运行。由于

.on（）

方法位于jQuery或jQLite中，因此它们似乎没有$scope-aware之类的功能

但是，为每个滚动事件运行脏检查并不是非常有效，因此您最好在执行DOM操作时不使用以下指令中的

ng class

：

<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;
    });
}]);

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;
          }
        });
      }        
    }
  });

---

你能在JSFIDLE中复制吗？我很想复制，但我不知道如何在JSFIDLE中引用插件。我没有在JSDeliver找到它？有什么想法吗？慢到底是什么意思？你的实际症状是什么？是类本身应用缓慢，还是由它触发的效果缓慢？它们是两个不同的东西。条件（

$scope.useFixedPosition=$document.scrollTop（）>385；

）的计算速度相当快。但将固定位置应用于给定ul大约需要4-5秒。应用（确切地说）类所需的时间太长。@lexeme您可以从github获取分发文件并使用GitRaw查找在JSFIDLE中工作的URL。您可以使用我为您制作的工具，并尝试使其与您的代码一起工作。