从Angular 1.1.4开始,您可以拥有一个动态模板URL.从这里开始,
templateUrl - 与模板相同,但模板是从指定的URL加载的.由于模板加载是异步的,因此编译/链接将暂停,直到加载模板为止.
您可以将templateUrl指定为表示URL的字符串,或者指定为带有两个参数tElement和tAttrs的函数(在下面的编译函数api中描述)并返回表示url的字符串值.
如何利用它来生成基于我的指令属性的动态模板?显然这不起作用,因为tAttrs.templateType只是字符串"templateType"
templateUrl: function (tElement, tAttrs) {
if (tAttrs.templateType == 'search') {
return '/b/js/vendor/angular-ui/template/typeahead/typeahead.html'
} else {
return '/b/js/vendor/angular-ui/template/typeahead/typeahead2.html'
}
}
Run Code Online (Sandbox Code Playgroud)
鉴于我无法访问范围,我该如何管理?
我正在研究一组角度指令,我想根据属性的存在或值加载正确的模板.
<my-form horizontal> </my-form>
<my-form vertical> </my-form>
Run Code Online (Sandbox Code Playgroud)
如果是水平的,则templateUrl应该是/partials/horizontal-form和如果是vertical,则应该是templateUrl/partials/vertical-form
我对templateUrl感兴趣,因为我不能使用,template因为html取决于属性.在该compile.pre函数中,html已经加载.
如果还有另一种方法可以达到这个目的,我会对它开放,因为我现在开始使用棱角分析,信息越多越好.
谢谢
我可以在AngularJS 1.5组件中使用多个模板吗?我有一个组件有一个属性,所以我想根据该属性名称加载不同的模板.如何根据元素的属性名称加载模板?
jsConfigApp.component('show', {
templateUrl: 'component/show.html', //How to change it based on attribute value?
bindings:{
view:"@"
},
controller: function () {
console.log(this.view)
if (this.view = "user") {
console.log("user")
} else if (this.view = "user") {
console.log("shop")
} else {
console.log("none")
}
}
})
Run Code Online (Sandbox Code Playgroud)
谢谢.
我有角度指令的问题.当我编辑引用的文件的内容时,templateUrl直到我删除缓存后才会显示结果.我有以下代码:
Directive.js
.directive('appMainsec',['$window', function ($window){
var objectMainSec = {
restrict: 'A',
templateUrl: 'partials/app-mainsec.html',
controller: function (){},
controllerAs: 'MainSectCtrl',
link: function ($scope,elemnt,attr){
elemnt.css('height', ($window.innerHeight - ($window.innerHeight * .25)) + 'px');
}
};
return objectMainSec;
}]);
Run Code Online (Sandbox Code Playgroud)
APP-mainsec.html
<div><h1>Principal</h1></div>
Run Code Online (Sandbox Code Playgroud)
和index.html
...
<div app-mainsec></div>
...
Run Code Online (Sandbox Code Playgroud)
当我改为<h1>Hi</h1>时<h1>Hello</h1>,指令的视图在我删除缓存之前不会更新.