javascript - 最佳实践 : Should I use ng-switch for this?

<分区>

我在 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 />但我不确定这是否有效，或者是否有更好的方法来创建它。

非常感谢您的想法!

最佳答案

到目前为止，您所拥有的看起来不错。

根据您的列的不同程度，您可以选择仅使用一个动态加载模板的指令而不是多个指令。例如，看看 ng-include :

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

关于javascript - 最佳实践 : Should I use ng-switch for this?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31278809/

上一篇：javascript - 使用 grunt 进行 Angular 缩小会导致 'Failed to instantiate module' 错误

下一篇：javascript - 不寻常的 d3 放大可重用类 - this 和 bind

相关文章：

ajax - 如何配置 Restangular URL 构建的 Id 属性

angular - 如何在 Angular 2 中的 ngSwitchCase 之后获取对组件的引用？

Angularjs。 ng-switch 在表格内不起作用

javascript - 我想从 200 页中删除以下脚本

javascript - Angular : service. setData 不是函数

javascript - 在 Cypress 测试中尝试使用 Auth0 登录时出错

angularjs - ng-repeat中的 Angular 无限$digest循环

javascript - angularjs数组拼接到另一个元素

javascript - 如何在不更改整个列表的情况下编辑列表中的项目？

javascript - 使用 JQuery 识别本地 PC