AngularJS指令动态模板
AngularJS指令动态模板
提问于 2014-04-15 00:21:58
我正在尝试根据作用域的值使用不同的模板来创建指令。
这就是我到目前为止所做的，我不知道为什么不起作用，http://jsbin.com/mibeyotu/1/edit
HTML元素：
<data-type content-attr="test1"></data-type>指令：
var app = angular.module('myApp', []);
app.directive('dataType', function ($compile) {
var testTemplate1 = '<h1>Test1</h1>';
var testTemplate2 = '<h1>Test2</h1>';
var testTemplate3 = '<h1>Test3</h1>';
var getTemplate = function(contentType){
var template = '';
switch(contentType){
case 'test1':
template = testTemplate1;
break;
case 'test2':
template = testTemplate2;
break;
case 'test3':
template = testTemplate3;
break;
}
return template;
};
var linker = function(scope, element, attrs){
element.html(getTemplate(scope.content)).show();
$compile(element.contents())(scope);
};
return {
restrict: "E",
replace: true,
link: linker,
scope: {
content:'='
}
};
});回答 4
Stack Overflow用户
回答已采纳
发布于 2014-04-15 00:34:39
1)您正在将内容作为属性传递到html中。试试这个：
element.html(getTemplate(attrs.content)).show();而不是：
element.html(getTemplate(scope.content)).show();2)指令的数据部分正在编译，所以你应该使用其他东西。而不是数据类型，例如datan-type。
链接如下：
Stack Overflow用户
发布于 2014-04-15 00:40:15
您可以将指令定义对象的template属性设置为将返回动态模板的函数：
restrict: "E",
replace: true,
template: function(tElement, tAttrs) {
return getTemplate(tAttrs.content);
}注意，此时您还没有访问scope的权限，但是您可以通过tAttrs访问属性。
现在您的模板在编译阶段之前就已经确定了，您不需要手动编译它。
Stack Overflow用户
发布于 2014-11-21 05:27:44
您也可以像这样非常简单地执行此操作：
appDirectives.directive('contextualMenu', function($state) {
return {
restrict: 'E',
replace: true,
templateUrl: function(){
var tpl = $state.current.name;
return '/app/templates/contextual-menu/'+tpl+'.html';
}
};
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23065165
复制相关文章
相似问题