最佳实践:我应该为此使用 ng-switch 吗?
Best Practices: 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>
我在 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>