AngularJS. Templates are not included in ui-views, when transitioning between child states of different abstract parents

Question

Templates are not included in ui-views, when transitioning between child states of different abstract parents.

Here is the plunker and link to the editor. Navigate form login (auth.login) state to dashboard (app.dashboard) state, header and footer templates are not included in ui-views.

Example of $stateProvider:

  .state('auth', {
    abstract: true,
    views: {
      'app-outer': {
        templateUrl: 'auth.html'
      }
    }
  })
  .state('auth.login', {
    url: '/login',
    views: {
      'app-inner': {
        templateUrl: 'login.html'
      }
    }
  })
  .state('app', {
    abstract: true,
    views: {
      'header': {
        templateUrl: 'header.html'
      },
      'app-outer': {
        templateUrl: 'app.html'
      },
      'footer': {
        templateUrl: 'footer.html'
      }
    }
  })
  .state('app.dashboard', {
    url: '/dashboard',
    views: {
      'app-inner': {
        templateUrl: 'dashboard.html'
      }
    }
  });

I've tried passing {reload: true} in the ui-sref-opts and used $state.go() method with {reload: true}.

As a temporary solution I've added header@app, footer@app etc. to the app.dashboard state. But it would be nice to not repeat this everywhere.

  'header@app': {
    templateUrl: 'header.html'
  },
  'app-inner': {
    templateUrl: 'dashboard.html'
  },
  'footer@app': {
    templateUrl: 'header.html'
  }

Daniel · Accepted Answer · 2016-12-28 11:43:26Z

1

Your template index.html has app-outer view in it. app.html has header, app-inner, and footer in it. However, you have header and footer as views of app state, which corresponds to index.html. It looks like it attempts to populate those templates when the parent state first becomes active, before the child state (with app.html) is loaded, so it doesn't find the ui-views for the header and footer states.

In other words, it looks like a ui-view element corresponding to a view must exist at the time the state that defines that view becomes active.

See this Plnkr, which insert another level of wrapping state.

edited Dec 28, 2016 at 11:43

answered Dec 28, 2016 at 11:37

Daniel

1,0871 gold badge11 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Svyatoslav Over a year ago

Thanks, it's much better than a temporary solution that I've used, helps to keep it DRY.

Collectives™ on Stack Overflow

AngularJS. Templates are not included in ui-views, when transitioning between child states of different abstract parents

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related