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

Popular posts from this blog

toolbar - How to add link to user registration inside toobar in admin joomla 3 custom component -

linux - disk space limitation when creating war file -