Angular UI Router：根据父parsing对象决定子状态模板

这是我的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); } } }); 

我想用这个parsing的obj来决定子模板

  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' } } }); 

我怎么能做到这一点？

Answer 1

有一个工作的例子 。 我们应该使用templateProvider代替templateProvider 。 这是新的状态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，如下所示：

检查在这个工作plunker基于TemplateProvider的解决scheme