最佳实践：我应该使用ng-switch吗？

Question

我在Angular中有这个对象。

$scope.columns = {
    workspace: {
        title: "Workspace",
        type: "workspace",
        activities: []
    },
    alerts: {
        title: "Alerts",
        type: "alert",
        activities: []
    },
    main: {
        title: "Main Feed",
        type: "main",
        activities: []
    }
};

我需要在HTML中循环遍历它，以动态创建我的应用程序中的一系列列（类似Trello）。

每个type都是一个自定义指令的引用。

我正在尝试找出放置指令的最佳方式。

基于这些数据，下面的代码是否是处理动态创建它们的适当方式？

<div ng-repeat="(key, obj) in columns">

    <div ng-switch on="obj.type">
        <workspace-feed ng-switch-when="workspace" />
        <alert-feed ng-switch-when="alert" />
        <main-feed ng-switch-when="main" />
        <filter-feed ng-switch-when="filter" />
    </div>

</div>

我很乐意能够做出类似于...<{{obj.type}}-feed />的东西，但我不确定这是否有效，或者是否有更好的方法来创建它。

非常感谢您的想法！

- Chris R.

---

ngSwitch出了什么问题？ - dfsq

看起来还不错。每个 feed 有多大的不同？也许你不需要为每个 feed 设置单独的指令 - 也许你可以使用一个单一的指令，根据列类型动态加载模板。这取决于你的列。 - Agop

@dsfq - 没有什么问题，我只是在寻找类似这样的“最佳实践”。 - Chris R.

@Agop - 我不知道我可以动态加载模板。听起来正是我需要的。谢谢！ - Chris R.

你能展示一下你的指令在做什么吗？ - Pankaj Parkar

Answer 1

你目前的内容看起来很好。

根据你的列有多不同，你可以选择使用只加载模板的一个指令，而不是多个指令。例如，看一下ng-include：

<div ng-include="'columns/' + column.type + '.html'"></div>

- Agop