angularJs / ui-router : ability to change state during resolve -
i have 2 siblings states, , b match same url want go or b according asynchronous server answer.
i have created third state, pivot
. aim of "pivot" intermediate state redirect or b based on asynchronous server call done in parent state. pivot
has url: ^/?page
attribute in configuration (but , b don't have attribute). pivot
sibling of a
, b
. pivot
has $state.go()
in it's onenter
method.
the problem encounter : - when page displayed first time, parent's state resolve run twice. - when clicking on link switch b or b a, error: null not object (evaluating '$state.$current.locals[name]')
triggered.
see http://jsfiddle.net/opeaucelle/6gqygkt7
$stateprovider .state('root', { abstract: true, views: { 'main': { template: '<ui-view name="body"></ui-view><hr />' + 'resolvenames : <li ng-repeat="resolvename in resolvenames track $index">{{ resolvename }}</li>' } }, resolve: { foo: function($rootscope) { if (! $rootscope.resolvenames) { $rootscope.resolvenames = ['root']; } else { $rootscope.resolvenames.push('root'); } } } }) .state('root.app', { params: { page: null }, resolve: { appdata: function($q, $rootscope, $stateparams, $timeout) { $rootscope.resolvenames.push('root.app'); var defer = $q.defer(); $timeout(function() { // calculate target according asynchronous process defer.resolve({target: "root.app." + $stateparams.page}); }, 100); return defer.promise; } } }) .state('root.app.pivot', { url: '^/?page', views: { 'body@root': { template: '<div>default body</div>' } }, onenter: function($state, appdata) { if (appdata.target) { $state.go(appdata.target); // change state } } }) .state('root.app.a', { views: { 'body@root': { template: '<h2>body a</h2>' } } }) .state('root.app.b', { views: { 'body@root': { template: '<h2>body b</h2>' } } });
how can ?
Comments
Post a Comment