Question

在我使用AngularJS（1.5）的单页应用中，我需要在各种视图中显示项目列表。

但是列表中的项目并不总是相同（例如，它可能是第A页上的完整列表，例如100个对象，以及针对具有给定属性的项目的过滤列表，例如10个对象，以及页面C，D，......的相同想法。

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

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

第一个想法是拥有一个“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视图共享列表项模板？

2 个答案: