如何在多個AngularJS視圖中共享列表項模板？

在我使用AngularJS（1.5）的單頁應用程序中，我需要提供各種視圖中的項目列表。如何在多個AngularJS視圖中共享列表項模板？

但是，列表中的項目並不總是相同的（例如，它可能是A頁上的完整列表，比如說有100個對象，並且在頁面B上具有給定屬性的項目的過濾列表，比如說10對象，以及頁面C，D ...的相同想法）。

我想確保整個頁面的顯示效果始終如一（即每行3行，左側圖標和右側標誌），並避免HTML代碼重複。

除了列表之外，每個頁面都有一些特定的內容，它們在頁面A，B，C ...之間有所不同，所以我希望能夠嵌入某種「列表組件」。

第一個想法是有一個「listItem.html」模板，可以包含在頁面A和頁面B的視圖中，但我無法找到，因爲對象數組不同，在頁面上 - 它必須在ng-repeat中給出。

我也有一個「MyList.js」控制器和一個「mylist.html」視圖模板來管理頁面A和頁面B的視圖內的列表，但我需要通過他們一個不同的數組的物體，所以我不確定它是否可行。

所以最後我沒有工作解決方案。

你有什麼建議嗎？非常感謝！

來源

2016-12-02 bfredo123

-1

我可以通過開發一個指令來解決我的需求，該指令以對象列表作爲參數。

來源

2016-12-02 19:22:16 bfredo123

您可以定義認爲你的項目和用於過濾列表的方法的服務：（注意這個答案很一般，給你的想法，而不是一個工作的例子！）

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)) { 
      . 
      . 
      . 
     }

來源

2016-12-02 07:17:45 Rachmaninoff

非常感謝您的幫助。我沒有在頁面A，B ......中提到，除了列表之外，還有其他特定的內容，並且每個頁面都有所不同。該列表只是頁面中的一個主要部分。在這種情況下，我相信你提出的建議並不是一帆風順的。我將編輯我的問題以添加我忘記的內容。再次感謝 – bfredo123

如何在多個AngularJS視圖中共享列表項模板？

回答

相關問題