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

Is there any ostensible issue with the following snippet:

以下代码段是否有任何表面上的问题:

  <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:

用这个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;
  };

This seems to be causing a "Error: 10 $digest() iterations reached. Aborting!" error, but I'm not sure why. Is it because pathElements() is returning a new array each time? Is there a way to get around this?

这似乎导致了“错误:10 $ digest()迭代达成。中止!”错误,但我不确定为什么。是因为pathElements()每次都返回一个新数组吗?有办法解决这个问题吗?

2 个解决方案

#1

Yes, this happens because you're returning a new array every time, and the $digest cycle loops infinitely (but Angular ceases it). You should declare it outside the function.

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

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

  // ...
}

We use $scope.pathArray.length = 0 instead of creating a new one, to avoid it firing continuously.

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

You should also consider what @Flek suggests. Call this function only once, in the time you need it to recalculate. And all you binds should be directly over $scope.pathArray.

您还应该考虑@Flek建议的内容。在您需要重新计算的时间内,只调用此函数一次。所有你绑定的应该是直接在$ scope.pathArray上。

If you do need a function to test its clenaning state before using it, then at least I suggest you to create two separate functions, just to keep each function with it own attribution.

如果你确实需要一个函数来测试它的清洁状态,那么至少我建议你创建两个独立的函数,只是为了让每个函数都有它自己的属性。

#2

For some nice reference on how to implement breadcrumbs in Angular check out the angular-app project (breadcrumbs service, how to use it).

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

Here's a demo plunker.

这是一个演示插件。

#1