动态包含模板角度指令
Dynamic include template angular directive
所以我想发出一个指令来自动包含选项卡和内容,但我无法获取存储在partials/tabs/tab[x].html
中的内容。
AvailableTabs
- 定义为数组的常量:
myApp.constant("availableTabs", [
{name:'tab1', title:'One', content:'partials/tabs/tab1.html'},
{name:'tab2', title:'Two', content:'partials/tabs/tab2.html'},
{name:'tab3', title:'Three', content:'partials/tabs/tab3.html'}
]);
我的指令会检测要包含的正确选项卡,并尝试包含选项卡的内容:
myApp.directive('myTabs',['availableTabs','$templateCache', function(availableTabs, $templateCache) {
return {
restrict: 'A',
template: function (elem, attr) {
for (index = 0; index < availableTabs.length; ++index) {
if(availableTabs[index].name == attr.myTabs) {
return '<tab heading="'+availableTabs[index].title+'" ng-show="1"> ' +
'<div ng-include="'+availableTabs[index].content+'"></div>'+
'</tab>';
//return '<tab heading="'+availableTabs[index].title+'" ng-show="1"> ' +
// $templateCache.get(availableTabs[index].content)+
// '</tab>';
}
}
},
};
}]);
问题是选项卡的内容是空的,我没有错误。
我的 html 如下:
<tabset>
<div my-tabs="tab1"></div>
<div my-tabs="tab2"></div>
<div my-tabs="tab3"></div>
</tabset>
我尝试在指令中注入$templateCache
,但它在检索内容时返回undefined
,我也尝试采用相对于脚本路径的路径,但仍然undefined
。
因为您在ng-include
中错过了'
,因为将模板名称传递为 string
。因为ng-include
指令需要string
作为输入。
ng-include="'''+availableTabs[index].content+'''"
将呈现如下
ng-inlcude="'partials/tabs/tab1.html'"
相关文章:
- 打开一个模态并将其链接到AngularJS中的指令
- 包含数据库中相关信息的开放模态
- 包含ng模板的指令中的角度transclude(通用Confirm Modal)
- 使用 Angular 和 UI-bootstrap 对模态事件绑定无法工作的指令
- 从指令打开角度模态
- 如果指令包含在另一个指令中,我如何在隔离范围内添加双向数据绑定属性
- AngularJS指令未包含在父元素中
- 创建一个模态指令,并将click事件绑定到angular js中
- 如何使用自定义角度指令包含子元素
- AngularJS在指令中包含HTML属性
- mocking和测试指令,隔离范围包含ng模型
- 在 Angular 指令中获取原始包含的内容
- AngularJS - 在所有指令呈现后包含<脚本>
- AngularJS - 包含嵌套属性指令的内容
- AngularJS指令包含文件内容
- 如何定义角度指令,该指令包含一个方法,并且可以通过“ng click”调用
- 如何让angular指令包含&替换另一个指令
- 如何在angular js中把自定义指令包含到另一个自定义指令的模板(html)中
- 动态地将一个指令包含在另一个指令中
- 如何从iframe中访问包含模态的父窗口,在该模态中打开