ng-repeatで無限のダイジェストループを引き起こす関数を使用する

Question

次のコードがあります。

https://plnkr.co/edit/Tt7sWW06GG08tdJu72Fg?p=preview。ウィンドウ全体を拡大して全体のビューを表示してください。

私はcategoriesとsub-categoriesを上記のplunkrに示すようにnavbarに表示します。各カテゴリには、表示するサービス/サブカテゴリがあります。

2つのネストされたng-repeatsを使用しています。内側のものは、親の反復の値をng-repeatとしています。私はDocumentsFactoryからgetServicesByCategoryを呼び出してpromiseを呼び出す配列subcategoriesのデータを返すように内部に関数getServicesByCategoryを添付しました。これは最終的に内部ng-repeatによって反復されるはずです。

カテゴリは表示されていますが、サブカテゴリは表示されません。

これには2つの問題があります。

1）。サブカテゴリはすべてのカテゴリで同じように表示され、表示されているサブカテゴリは外部ngリピート反復の最後のカテゴリ、つまりUtility Servicesに属します。代わりに、各カテゴリはそれ自身のサブカテゴリを示すべきです。

2）。コンソールには、http://errors.angularjs.org/1.5.6/ $ rootScope/infdig？p0 = 10 & p1 =％5B％5Dがコンソールで繰り返し表示されるため、複数のエラーinfinite digest cycleが10を超えているために中止されています。メソッドgetServicesByCategoryは、複数のダイジェストサイクルをトリガする無限ループで呼び出されています。

Angularのdirty checkingとdigest cyclesで複雑な単純なカテゴリの問題のようです。

ng-repeatに関連する関数の中に新しいオブジェクトを返さないように提案している複数のスレッドと投稿を読んでいます。私はsubcategoriesの参照を返しています。

inner ng-repeatは、outerのデータに依存します。 ng-repeatに関数をバインドすることは、私にとっては単なる選択肢でした。これは正しいアプローチですか？カテゴリとサブカテゴリを取得するためのAPIは異なりますし、それらを変更する柔軟性はありません。私は解決策を考え出すことができませんでした。各カテゴリに対して適切なサブカテゴリを作成するだけです。

ご協力いただきますようお願い申し上げます。

注：ビューをフルウィンドウで開くと、左側のナビゲーションバーが表示されます。

Answer 1

解決策は、必要なすべてのデータを取得し、それぞれが独自のサブカテゴリを含むカテゴリの配列を作成することです。入れ子になったng-repeatsでこのオブジェクトを使用します。外ng-repeatで

ng-repeat="category in documents.categories" 

と：あなたが見ることができるように

https://plnkr.co/edit/BaHOcI4Qa8t5CkbshyCX

は、私が使用：

あなたplunkerの私の更新バージョンを確認してください

ng-repeat="service in category.subCategories" 

内側のもので。

getSubcategoriesがある

documentsFactory 
    .getCategories() // Get categories 
    .then(function(response) { // Extract them from the response 
    return response.data.subCategory; 
    }) 
    .then(getSubcategories) // For every catgory, get its own subcategory 
    .then(function(categories) { // Add categories to the $scope 
    self.categories = categories; 
    }); 

：

function getSubcategories(categories) { 
    console.log(categories) 
    var retrievSubcategories = categories.map(function(category) { // Create a promise to get the subcategories for every category 
    return documentsFactory 
     .getServicesByCategory(category.name) // Get the subcategories for the given category 
     .then(function(response) { 
     category.subCategories = response.data.documents; // Add subgategories to the category 
     return category; 
     }); 
    }); 
    return $q.all(retrievSubcategories) // Return a promise resolve only when all the subcategories for every category are retrieved 
} 

私は次のように category.subCategoriesを構築コントローラで