如何在多个 AngularJS 视图之间共享列表项模板？

Question

在我的 AngularJS (1.5) 单页应用程序中，我需要在各种视图中显示项目列表。

但是列表中的项目并不总是相同的（例如，它可能是页面 A 上包含 100 个对象的完整列表，以及页面上具有给定属性的项目的筛选列表B，假设有 10 个对象，C、D、...页面的想法相同。

我想确保页面之间的演示始终相同（即每个项目 3 行，左侧是一个图标，右侧是徽章），并避免 HTML 代码重复。

除了列表之外，每个页面都有一些特定的内容，这些内容在 A、B、C、...页面之间有所不同，所以我希望能够嵌入某种 "list component"。

第一个想法是有一个 "listItem.html" 模板，我可以将其包含在页面 A 和页面 B 的视图中，但我找不到方法，因为对象数组不相同取决于页面 - 它必须在 ng-repeat 中给出。

我还想过要有一个 "MyList.js" 控制器和一个 "mylist.html" 视图模板来在页面 A 和页面 B 的视图中管理此列表，但我需要向它们传递一个不同的对象数组，所以我不确定它是否可行。

所以最后我没有可行的解决方案。

对此您有什么建议吗？非常感谢！

Answer 1

您可以定义一个服务来保存您拥有的项目和过滤列表的方法：（请注意，这个答案是非常笼统的，不是一个有效的例子！）

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

Answer 2

我可以通过开发一个将对象列表作为参数的指令来满足我的要求。

如何在多个 AngularJS 视图之间共享列表项模板？

how to share a list item template across several AngularJS views?

html

angularjs

list

templates

reusability