Routeur UI angulaire: décide d'un modèle d'état enfant sur la base de l'objet résolu parent

C'est mon fichier app.js: j'ai un état parent et deux états enfants. Les vues des enfants ont besoin de l'objet.

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

Je veux utiliser cet obj résolu pour décider du modèle enfant

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

Comment puis-je atteindre cet objectif?

Il existe un exemple de travail. Au lieu de templateUrl nous devrions utiliser le templateProvider . C'est une nouvelle définition d'état:

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

Pourquoi utilisons-nous cette approche? Comme documenté ici:

Modèles

TemplateUrl
… templateUrl peut également être une fonction qui renvoie une URL. Il faut un paramètre prédéfini, stateParams , qui n'est PAS injecté.

TemplateProvider
Ou vous pouvez utiliser une fonction de fournisseur de modèles qui peut être injecté, avoir accès aux locaux et doit renvoyer le modèle HTML, comme ceci:

Vérifiez la solution basée sur TemplateProvider dans ce plongeur actif