角度动态模板指令 [英] angular dynamic templating directives
问题描述
我有一个不同字段类型的列表,我想根据类型应用模板.如果我使用这样的内联模板,我可以让它工作:
flowPageModule.directive('myField', ['$compile','$http', '$templateCache', function($compile, $http, $templateCache) {var inlineTemplateMapping = {选择:'<div><span>{{label}} <select ng-model="metadata.options[0]" ng-options="o.text for o in metadata.options"></select></span></div>',文本:'{{label}}   <input type="text"/></span></div>'}返回 {限制:'E',替换:真的,转置:真实,范围:{ 类型:'=',标签:'=',元数据:'='},链接:函数(范围、元素、属性){if (scope.metadata) { 警报(scope.metadata.options[0].text);}var templateLiteral = inlineTemplateMapping[scope.type];element.html(templateLiteral);$compile(element.contents())(scope);}};}]);
如果我可以使用 $http 服务从文件中检索模板,我真的希望它能够工作.我已经尝试了下面的内容,但我总是收到类型错误.
flowPageModule.directive('myField', ['$compile','$http', '$templateCache', function($compile, $http, $templateCache) {var baseUrl = '指令/字段/',类型模板映射 = {文本:'我的字段文本.html',选择:'我的字段选择.html'};返回 {限制:'E',替换:真的,转置:真实,范围:{ 类型:'=',标签:'=',元数据:'='},链接:函数(范围、元素、属性){var templateUrl = baseUrl + typeTemplateMapping[scope.type];$http.get(templateUrl, {cache: $templateCache}).success( function(html) {元素.html();$compile(element.contents())(scope);});}};
}]);
为什么会这样?
解决方案 我得到报酬来创建这个,但实际上没有人真正关心实现(好还是坏?)...我很乐意分享这个到社区.我改编了另一个 SO 答案中的 loadT() 函数.您可以在搜索动态模板角度"时找到它.此处的适配允许您在 $http promise 未返回时显示一个空组件.
用法
<p dynamic template="'template/file.html'"></p><p 动态模板="someObjectInController.value"></p>
*transclusion 不起作用.所以请随意添加/更正.问题在于缺少 transclude 函数的文档.
cpanel.directive("dynamic", ["$compile", '$templateCache', '$http',函数 ($compile, $templateCache, $http) {返回 {优先级:0,限制:'EA',替换:真的,转置:真实,控制器:'SomeController',范围: {模板:@模板"},链接:函数(范围,iElement,iAttrs){scope.$parent.$watch(iAttrs.template, function (newvalue, oldvalue) {if ((oldvalue !== newvalue) && (newvalue !== undefined) && (newvalue !== null)) {加载T(新值);} else if ((newvalue !== undefined) && (newvalue !== null)) {加载T(新值);} 别的 {//去做}}, 真的);函数 loadT(it) {$http.get(it, { cache: $templateCache}).success(function (templateContent) {iElement.replaceWith($compile(templateContent)(scope));});}}};}]);
I have a list of different field types and I want to apply a template based on type. I can get it to work if I use inline templates like this:
flowPageModule.directive('myField', ['$compile','$http', '$templateCache', function($compile, $http, $templateCache) {
var inlineTemplateMapping = {
select: '<div><span> {{label}}   <select ng-model="metadata.options[0]" ng-options="o.text for o in metadata.options"></select> </span></div>',
text: '<div><span> {{label}}   <input type="text" /> </span></div>'
}
return {
restrict: 'E',
replace: true,
transclude: true,
scope: { type: '=', label: '=', metadata: '=' },
link: function (scope, element, attrs) {
if (scope.metadata) { alert(scope.metadata.options[0].text); }
var templateLiteral = inlineTemplateMapping[scope.type];
element.html(templateLiteral);
$compile(element.contents())(scope);
}
};
}]);
I would really like for it to work if i could use the $http service to retrieve a template from a file. I have tried what is below, but I always get a Type error.
flowPageModule.directive('myField', ['$compile','$http', '$templateCache', function($compile, $http, $templateCache) {
var baseUrl = 'directives/field/',
typeTemplateMapping = {
text: 'my-field-text.html',
select: 'my-field-select.html'
};
return {
restrict: 'E',
replace: true,
transclude: true,
scope: { type: '=', label: '=', metadata: '=' },
link: function (scope, element, attrs) {
var templateUrl = baseUrl + typeTemplateMapping[scope.type];
$http.get(templateUrl, {cache: $templateCache}).success( function(html) {
element.html();
$compile(element.contents())(scope);
});
}
};
}]);
Why does this happen?
解决方案 I got paid to create this, but since actually no one really care about the implementation (good or bad?)...I am feeling free to share this to the community.
I adapted the loadT() function from another SO answer. You can find it searching for "dynamic template angular". The adapation here allows you to display an empty component while $http promise has not returned.
usages
<p dynamic template="'template/file.html'"></p>
<p dynamic template="someObjectInController.value"></p>
*transclusion doesn't work. So feel free to add/correct. The issue lies in the lack of documentation for the transclude function.
cpanel.directive("dynamic", ["$compile", '$templateCache', '$http',
function ($compile, $templateCache, $http) {
return {
priority: 0,
restrict: 'EA',
replace: true,
transclude: true,
controller: 'SomeController',
scope: {
template: "@template"
},
link: function (scope, iElement, iAttrs) {
scope.$parent.$watch(iAttrs.template, function (newvalue, oldvalue) {
if ((oldvalue !== newvalue) && (newvalue !== undefined) && (newvalue !== null)) {
loadT(newvalue);
} else if ((newvalue !== undefined) && (newvalue !== null)) {
loadT(newvalue);
} else {
//TODO
}
}, true);
function loadT(it) {
$http.get(it, { cache: $templateCache}).success(function (templateContent) {
iElement.replaceWith($compile(templateContent)(scope));
});
}
}
};
}
]);
这篇关于角度动态模板指令的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文