Ui-Router $state.go() does not reload data

Question

After post some data using Restangular, I want go to another $state and reload data from server using this code:

.directive('ngShowBook', [function(){
    return {
        restrict : 'E',
        controller : 
             $scope.myFunc = function(){
                var bookRelated={ ...};
                Restangular.service('books').post(bookRelated).then(function(){
                     $state.go('parent.main', null, {reload: true}).then(function(){
                         console.log('ok');
                     }, function(err) {
                         console.log(err);// <-this shows error message
                     });

                });
           }
.
.
.

and this is my router:

.state('parent', {
  abstract: true,
  url: '/parent',
  templateUrl: 'app/parent/templates/home.html',
  resolve: {
    books:function(Restangular) {
      return Restangular.one('books',10).get();
    },
  },
}).state('parent.main',{
  url: '/main',
  templateUrl: 'app/parent/templates/main.html',
})

When I post data, it goes to new $state but without reloading the resolve function. Its error message is:

Error: transition prevented
at $StateProvider.$get (http://localhost:3000/bower_components/angular-ui-router/release/angular-ui-router.js:2867:41)
at Object.invoke (http://localhost:3000/bower_components/angular/angular.js:4473:17)
at http://localhost:3000/bower_components/angular/angular.js:4290:37
at getService (http://localhost:3000/bower_components/angular/angular.js:4432:39)
at Object.invoke (http://localhost:3000/bower_components/angular/angular.js:4464:13)
at http://localhost:3000/bower_components/angular/angular.js:4294:79
at forEach (http://localhost:3000/bower_components/angular/angular.js:336:20)
at createInjector (http://localhost:3000/bower_components/angular/angular.js:4294:3)
at doBootstrap (http://localhost:3000/bower_components/angular/angular.js:1655:20)
at bootstrap (http://localhost:3000/bower_components/angular/angular.js:1676:12)

According this I have to add event.preventDefault(); , but I don't now where I can add it in this case. And is that solve the problem?

`{reload: true}` won't reload the parent state, it will only force to reload the current state. To force a full reload, you can define a diferent state, let's call it `reloadState` and create a transition to `reloadState` and then immediately to `parent.main`. — Sulthan, Sep 19 '15 at 09:28
Thank you Sulthan. I add a resolve function to 'parent.main', but using my code , data doesn't reload yet. — mrbf, Sep 19 '15 at 09:45
you did not mentioned from which state is $state.go called, then i can help you. — Milos Mosovsky, Nov 21 '15 at 00:32

score 1 · Answer 1 · answered Dec 01 '15 at 22:13

I was having a similar issue and managed to solve it by doing something similar to the advice given in the comments, namely redirect out to a dummy route (in this case I used my index route as it doesn't actually do anything) and then immediately redirect back to the intended route. It's a silly workaround and I'm still looking for something better, but it works for now;

$state.go('index').then(function(result) {
 $state.go('intended.route', {
  // params
 }, {
  // options
});

wilver · Answer 2 · 2015-12-15T13:54:48.530

Looking at the source code that generates the error, I managed this issue with this kind of code:

if ($state.current.name == 'parent.main')   
    $state.transitionTo($state.current, $stateParams, {reload: true, inherit: true, notify: false})
else
    $state.go('parent.main', null, {reload: true});

the key point is the notify:false parameter, so you have to understand well the meaning of its behaviour (it will not fire the $state's events, with some consequences), but if it's ok for your scenario, with this code, your state's resolve function will be called.

Ui-Router $state.go() does not reload data

2 Answers2