Angular UI Router: decide child state template on the basis of parent resolved object
There is a working example. Instead of templateUrl
we should use the templateProvider
. This is new state 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',
}
}
});
Why are we using this approach? as documented here:
Templates
TemplateUrl
...templateUrl
can also be a function that returns a url. It takes one preset parameter,stateParams
, which is NOT injected.TemplateProvider
Or you can use a template provider function which can be injected, has access to locals, and must return template HTML, like this:
Check the TemplateProvider
based solution in this working plunker