Roteador de IU Angular: decide o modelo de estado filho com base no object resolvido pai

este é meu arquivo app.js – eu tenho um estado pai e dois estados filhos. Ambas as vistas filhas precisam do object.

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

Eu quero usar este obj resolvido para decidir modelo filho

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

Como posso conseguir isso?

Existe um exemplo de trabalho. Em vez de templateUrl , devemos usar o templateProvider . Esta é a nova def do estado:

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

Por que estamos usando essa abordagem? conforme documentado aqui:

Modelos

TemplateUrl
templateUrl também pode ser uma function que retorna um URL. Leva um parâmetro predefinido, stateParams , que NÃO é injetado.

TemplateProvider
Ou você pode usar uma function de provedor de modelo que pode ser injetada, tem access a locais e deve retornar HTML de modelo, como este:

Verifique a solução baseada em TemplateProvider neste plunker de trabalho