angularjs - Angular UI-router and using dynamic templates -
i'm trying load template file using rootscope value it's name. have init controller sets $rootscope.template "whatever.html", have route this:
$stateprovider.state('/', { url: '/', access: 'public', views: { page: { controller: 'homectrl', templateprovider: function($templatefactory, $rootscope) { return $templatefactory.fromurl('/templates/' + $rootscope.template); } } } });
but doesn't work. freezes whole chrome have kill process in order stop it... i've tried templateurl no results.
so how use dynamic template file ui-router?
similiar other question (in order found them): angular , ui-router, how set dynamic templateurl, created a working plunker show how to. how work?
so, if state call:
<a href="#/parent/child/1">#/parent/child/1</a> <a href="#/parent/child/2">#/parent/child/2</a>
and these states:
$stateprovider .state('parent', { url: '/parent', //abstract: true, templateurl: 'views.parentview.html', controller: function($scope) {}, }); $stateprovider .state('parent.child', { url: '/child/:someswitch', views: { // see more below
then can use templateprovider
definiton:
templateprovider: function($http, $stateparams, getname) { // async service template name db return getname .get($stateparams.someswitch) // have name .then(function(obj){ return $http // let's ask template .get(obj.templatename) .then(function(tpl){ // haleluja... return template return tpl.data; }); }) },
what can see chaining of async results:
// first return of promise return asyncstuff .then(function(x){ // second return of promise once done first return asyncstuff .then(function(y){ // again return asyncstuff .then(function(z){ return ... } } }
and that's magical templateprovider
can us... wait until promises resolved , continue execution known template name , content. check example here. more template provider: angular ui router: decide child state template on basis of parent resolved object
Comments
Post a Comment