$templateCache
第一次使用模板,它被加载到模板缓存中,以便快速检索。你可以直接将模板标签加载到缓存中,或者通过$templateCache服务。
通过script标签:
This is the content of the template
备注:script标签模板不需要包含在文档头部。但他必须在$rootElement下,不然模板将会被忽略。
通过$templateCache服务:
(function() {
angular.module("Demo", [])
.run(["$templateCache",templateCache])
.controller("testCtrl", ["$templateCache","$sce",testCtrl]);functiontemplateCache($templateCache){
$templateCache.put('templateId.html', 'This is the content of the template');
}functiontestCtrl($templateCache,$sce) {vartpl = $templateCache.get('templateId.html');
tpl=$sce.trustAsHtml(tpl);this.text =tpl;
};
}());
在上面调用模板的代码中,可以使用controller里的代码调用缓存里的模板,但是需要注意的是,需要使用$sce转成受信任的html插入代码,所以这里需要注入$sce服务。而且这边不止可以使用js调用,也可以直接在html里标签里使用ng-include调用。
$templateRequest
$templateRequest服务运行进行安全检测,然后使用$http下载被提供的模板,成功后,将内容存储在$templateCache里。如果HTTP请求失败或HTTP请求的响应数据是空的,将抛出个$compile错误(通过设置该函数的第二个参数为true)。该注意的是,$templateCache的内容是可信的,所以调用$sce.getTrustedUrl(tpl)是省略的,当tpl的类型是字符串并且$templateCache具有匹配的项。
使用:$templateRequest(tpl,[ignoreRequestError]);
tpl:字符串或者TrustedResourceUrl,HTTP请求URL的模板。
ignoreRequestError:boolean值,当请求失败或模板为空时,是否忽略该异常。
使用代码:
(function() {
angular.module("Demo", [])
.run(["$templateCache",templateCache])
.controller("testCtrl", ["$templateRequest","$sce",testCtrl]);functiontemplateCache($templateCache){
$templateCache.put('templateId.html', 'This is the content of the template');
}functiontestCtrl($templateRequest,$sce) {varvm =this;
$templateRequest("templateId.html").then(function(html){
vm.text=$sce.trustAsHtml(html);
})
};
}());