在我的角度应用程序中,我有几个具有共享结构的面板,相同的html。
在面板内部,内容和行为发生了变化,基本上每个都是一个单独的指令,让我们称之为面板内容。
这是我认为最优的解决方案,但我有一些架构上的疑虑。
因为我有指令(它具有转换真集):
<panel></panel>
它的模板如下所示:
<div>
Content
<ng-transclude></ng-transclude>
</div>
我必须重复这些小组
<ul>
<li ng-repeat="panel in panels">
<panel>
<panel-content></panel-content>
</panel>
</li>
</ul
这一切都很好,但是选择&#34;这将是一个相当好的方式。在我应该展示<panel-content>
的每次迭代中?
假设我有panel.id
我可以使用。
我注意到我可以通过多种方式实现它,我可以使用面板ID在<panel-content>
视图中进行ng-switch,我可以设置templateUrl具有动态部分并链接到不同的URL取决于panel.id
。
但出于某种原因,我确信我错过了一些更直接的东西?
请注意,如果有其他结构更符合我的需求,请告知我们,这个架构不是一成不变的。
所以,问题又是,我该如何选择?或者更确切地说,谁负责选择应显示哪个<panel-content>
。
答案 0 :(得分:3)
如果我理解正确,我会在ng-include
指令中使用id
,每次模板都会更改<ul>
<li ng-repeat="panel in panels">
<panel type-id="panel.id">
</panel>
</li>
</ul>
:
类似的东西:
app.directive('panel',
function() {
return {
restrict: 'E',
replace: true,
template: '<ng-include src="getTemplateUrl()"/>',
link: function(scope,elem,attrs) {
scope.getTemplateUrl = function() {
var url;
if(attrs.typeId !== undefined){
var url = $rootScope.list_templates[attrs.typeId].value; // TODO: add validation
}
return url;
};
}
});
和指令:
$rootScope.list_templates = [
{ id: 0, value: 'partials/upcoming_0.html'},
{ id: 1, value: 'partials/upcoming_1.html'},
{ id: 2, value: 'partials/upcoming_2.html'}
];
应用的
{{1}}