Angular.js正在观察函数调用的结果

Question

下面的代码片段是否有明显的问题:

  <ul id="entry-name" class="breadcrumb">
      <li ng-repeat="dir in pathElements()" class="active">
          <span ng-show="!$last">
              &nbsp;<a href="#!?path={{dir.url}}">{{ dir.name }}</a>&nbsp;<span ng-show="!$first" class="dividier">/</span> 
          </span>
      </li>
      <li class="active">{{ pathElements()[pathElements().length - 1].name }}</li>
  </ul>

with this js:

  $scope.pathElements = function() {
      var retval = [];
      var arr = $scope.currentPath().split('/');
      if (arr[0] == '') {
          arr[0] = '/';
      }
      var url = "/";
      retval.push({name: arr[0], url: url});
      for (var i = 1; i < arr.length; ++i) {
          if (arr[i] != '') {
              url += arr[i] + '/';
              retval.push({name: arr[i], url: url});
          }
      }
      return retval;
  };

这似乎会导致"Error: 10 $digest()迭代到达。"错误，但我不确定为什么。是因为pathElements()每次都返回一个新数组吗?有办法绕过这个吗?

Answer 1

是的，这是因为你每次都返回一个新的数组，并且$digest循环是无限循环的(但是Angular会停止它)。你应该在函数外声明它。

$scope.pathArray = [];
$scope.pathElements = function() {
  // retval becomes $scope.pathArray
  if (weNeedToRecalcAllPathVariables) {
    $scope.pathArray.length = 0;
    // ...
  }
  // ...
}

我们使用$scope.pathArray.length = 0而不是创建一个新的，以避免它连续射击。

你也应该考虑@Flek的建议。只需在需要重新计算的时间内调用此函数一次。所有的键都应该直接在$scope.pathArray上

如果你确实需要一个函数在使用它之前测试它的清理状态，那么至少我建议你创建两个单独的函数，只是为了保持每个函数都有自己的属性。

Answer 2

有关如何在Angular中实现面包屑的一些很好的参考，请查看Angular -app项目(面包屑服务，如何使用它)。