複数のAngularJSビューでリストアイテムテンプレートを共有する方法は？

Question

AngularJS（1.5）を使用した私のシングルページアプリケーションでは、さまざまなビューのアイテムのリストを提示する必要があります。

しかし、リスト内の項目は必ずしも同じではありません（たとえば、100個のオブジェクトを持つページAの完全なリスト、およびページBの項目を持つ項目のフィルタリングされたリスト、たとえば10オブジェクト、およびページC、D、...についての同じアイデア）。

プレゼンテーションがページ（アイテムあたり3行、左側のアイコン、右側のバッジ）で常に同じであることを確認し、HTMLコードの重複を避けることをお勧めします。

各ページには、ページA、B、C、...の間で異なるいくつかの特定のコンテンツがありますので、何らかの「リストコンポーネント」を埋め込むことができます。

最初のアイデアは、ページAとページBのビューに含めることができる「listItem.html」テンプレートを使用することですが、オブジェクトの配列は同じではないため、どのように見つけることができませんそれはng-repeatで指定する必要があります。

ページAとページBのビュー内でこのリストを管理する "MyList.js"コントローラと "mylist.html"ビューテンプレートがあるとも考えましたが、別の配列に渡す必要があります私はそれが実現可能であるとは確信していません。

最後に私は解決策がありません。

ご提案はありますか？どうもありがとう！

Answer 1

私は、オブジェクトのリストをパラメータとして取るディレクティブを開発することで、私の要求に応えることができました。

Answer 2

あなたが持っているアイテムやリストをフィルタリングするための方法を保持しているサービスを定義することができます（この答えは、あなたではない実施例をアイデアを与えることは非常に一般的であることに注意！）

angular.module('app') 
    .factory('listService', function() { 
     return { 
      getAllItems: getAllItems 
     } 

     function getAllItems(query) { 
      if(!query) { 
       return list; 
      } 
      return list.filter() 
     } 
    }) 

ますこの

var state = { 
     url: 'list/:query', 
     templateUrl: 'list.html', 
     controller: ListController 
    } 

のような状態を定義し、あなたのコントローラでは、このようなようlistServiceを注入：

angular.mdoule('app') 
     .controller('ListController', function(listServide)) { 
      . 
      . 
      . 
     }