Angular UI Router:根据父解析对象来决定子状态模板
Angular UI Router: decide child state template on the basis of parent resolved object
这是我的app.js文件-我有一个父状态和两个子状态。两个子视图都需要这个对象。
states.push({
name: 'parentstate',
url: '/parent/:objId',
abstract: true,
templateUrl: 'views/parentview.html',
controller: function() {},
resolve: {
obj: function(OBJ, $stateParams) {
return OBJ.get($stateParams.objId);
}
}
});
我想用这个解析过的对象来决定子模板
states.push({
name: 'parentstate.childs',
url: '/edit',
views: {
"view1@parentstate": {
templateUrl: 'views/view1',
controller: 'view1Ctrl'
},
"view2@parentstate": {
templateUrl: function(obj) {
if (obj.something == something) {
return "views/view2first.html";
} else {
return 'views/view2second.html';
}
},
controller: 'view2Ctrl'
}
}
});
我怎样才能做到这一点?
有一个工作示例。我们应该用templateProvider
代替templateUrl
。这是新的状态def:
$stateProvider
.state('parentstate.childs', {
url: '/edit',
views: {
"view1@parentstate": {
templateUrl: 'views.view1.html',
controller: 'view1Ctrl',
},
"view2@parentstate": {
templateProvider: function($http, $stateParams, OBJ) {
var obj = OBJ.get($stateParams.objId);
var templateName = obj.id == 1
? "views.view2.html"
: "views.view2.second.html"
;
return $http
.get(templateName)
.then(function(tpl){
return tpl.data;
});
},
controller: 'view2Ctrl',
}
}
});
我们为什么要使用这种方法?如下所示:
模板TemplateUrl
…templateUrl
也可以是返回url的函数。预设参数stateParams
,不注入TemplateProvider
或者你可以使用模板提供程序函数,该函数可以被注入,可以访问局部变量,并且必须返回模板HTML,如下所示:
检查此工作柱塞中基于TemplateProvider
的溶液
相关文章:
- 引用对象中的通用值
- jQuery匹配JSON对象的部分文本
- 节点导出返回一个空对象
- 如何在Javascript中将JSon对象转换为数组
- 我可以在json对象中添加一个函数吗
- 使用JS将数组转换为json对象
- 全局变量和全局对象的属性之间有什么区别吗
- 比较从函数和生成的日期对象
- Javascript,访问一个主要对象模块模式中的每个对象
- 如果使用 lodash 将属性存在于另一个对象中,则向对象添加属性
- 调整窗口大小时,可拖动的对象会出现在容器外部
- 如何使用javascript从主svg对象动态创建svg视图框
- 如何使用json将对象列表从java转换为javascript
- 序列化数据属性中对象的最可靠方法
- 如何访问声音管理器2创建的声音对象
- FabricJs-限制主对象内添加对象的移动区域
- Javascript(Angular)从一个对象数组到第二个数组查找值
- "用于创建新对象的伪经典和原型范式“;.如何决定使用哪一个
- 在使用两种语言时,如何决定是使用JavaScript对象还是使用PHP对象
- 如何决定何时在javascript中使用数组或对象