0

我在这里关注thinksters angular nfl Fantasy教程http://www.thinkster.io/angularjs/eHPCs7s87O/angularjs-tutorial-learn-to-rapidly-build-real-time-web-apps-with-firebase,他们实现以这种方式活跃的ng级...

<li data-ng-repeat="entry in navbarEntries" data-ng-show="auth" data-ng-class="{ active: entry.isActive }">


$scope.$on('$routeChangeSuccess', function() {
    $scope.navbarEntries.forEach(
      function(data) {
        data.isActive = ($location.path().indexOf(data.link) == 0);
      }
    )
  })

他们对下面的实现有这个解释......

“你可能会问,为什么不直接从视图中调用一个方法来评估它是否应该处于活动状态?

原因是 $digest 循环重新评估。这个循环非常、非常频繁地发生,并且您在视图中用于评估属性的每个方法调用都会在每个循环中重新调用,这显然会随着应用程序的扩展而降低性能。”

我想知道“从视图中调用方法”会是什么样子,“评估属性”是什么意思,并且想要更多的解释在什么情况下使用这样来避免 $digest 循环重新-评估在角度上是合适的。

4

1 回答 1

1

从视图调用方法看起来像这样:

<li ng-class="{active: urlIsActive('/home/')}"><a href="#/home/">Home</a></li>

然后urlIsActive将是范围内的一个函数,如下所示:

$scope.urlIsActive = function(url) {
    return ($location.path().indexOf(url) == 0);
}

这种方法的问题在于,urlIsActive必须在每个作用域摘要循环中重新评估函数,从而浪费大量性能。他们建议的方法是使用事件来操作范围变量,这在性能方面更便宜。

请注意,建议的范围变量操作会在触发事件时发生。在渲染页面时,找出链接是否应该处于活动状态只是一个简单的变量查找,而不是实际执行一个函数(这本身就有很多开销)。

于 2014-02-24T09:41:20.680 回答