5

次のスニペットに明らかな問題はありますか:

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

この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;
  };

これにより、「エラー: 10 回の $digest() 反復に達しました。中止しています!」が発生しているようです。エラーですが、原因がわかりません。pathElements() が毎回新しい配列を返すからでしょうか? これを回避する方法はありますか？

4

2 に答える 2

4

はい、これは、毎回新しい配列を返しているために発生し、$digest サイクルが無限にループします (ただし、Angular は停止します)。関数の外で宣言する必要があります。

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

  // ...
}

$scope.pathArray.length = 0継続的に発火するのを避けるために、新しいものを作成する代わりに使用します。

@Flek の提案も検討する必要があります。この関数は、再計算が必要なときに一度だけ呼び出してください。そして、バインドするものはすべて、 のすぐ上にある必要があります$scope.pathArray。

関数を使用する前にクリーニング状態をテストする必要がある場合は、少なくとも 2 つの別個の関数を作成して、各関数に独自の属性を保持することをお勧めします。

于 2013-03-19T12:29:49.423 に答える
3

Angular でブレッドクラムを実装する方法に関する参考資料については、angular-appプロジェクト ( breadcrumbs service、how to use it ) を参照してください。

これがデモプランカーです。

于 2013-03-19T12:58:03.053 に答える