Question

我试图让AngularJs根据活动路线在导航部分应用active类。我的解决方案工作正常，但我注意到一种奇怪的行为 - 更多关于下面的内容。现在，这是在HTML中设置活动类的方式：

<ul class="menu" ng-controller="ControllerHeader">
  <li><a ng-class="{ active: isActive('/foo') }" href="#/foo">foo</a></li>
  <li><a ng-class="{ active: isActive('/bar') }" href="#/bar">bar</a></li>
  <li><a ng-class="{ active: isActive('/baz') }" href="#/baz">baz</a></li>
</ul>

ControllerHeader和isActive定义为：

var app = angular.module('app', [ ]);

app.controller( 'ControllerHeader', ['$scope', '$location',
  function ($scope, $location) {
    $scope.isActive = function (location) {
      // multiple logging occurs: exactly 3*3 times
      console.log(location, $location.path());
      return location === $location.path();
    };
  }
] );

我注意到的问题是上面的isActive被称为 3 * 3次！有人可以解释一下原因吗？我该如何解决这个问题呢？它只被称为一次每个项目？

Answer 1

如果您使用的是Angular 1.3+，则可以使用::运算符仅评估表达式一次：

<ul class="menu" ng-controller="ControllerHeader">
  <li><a ng-class="::{ active: isActive('/foo') }" href="#/foo">foo</a></li>
  <li><a ng-class="::{ active: isActive('/bar') }" href="#/bar">bar</a></li>
  <li><a ng-class="::{ active: isActive('/baz') }" href="#/baz">baz</a></li>
</ul>

如果您使用的是旧版Angular，则可以使用第三方库，例如bindonce

至于为什么这种情况一旦发生而没有约束力，实际上它也被许多其他问题所覆盖。如果您希望根据角度上下文动态设置类，Angular 需要来执行函数以检查其值。这被称为在摘要周期中执行观察者，这通常是这样做的。

Answer 2

在摘要周期运行时，您在AngularJS中使用的所有表达式都会被多次评估。这是为脏检查完成的，它验证表达式的当前值是否与最后一个值不同。

控制器功能多次调用

2 个答案: