Angular ui.router reload parent template

Question

I have an abstract base template that loads navigation by user type. This part works on boot. The problem is that I cannot force the parent Provider template to reboot when the user is logged in or logged out. I tried the solutions here to reload the parent template, but the nav templates are not affected. Is there a way to reload templateProvider or a better way to do this? Ideally, I will not add a navigator to each child route.

Routes:

$stateProvider .state('base', { abstract: true, views: { content: { template: '<ui-view></ui-view>', }, nav: { templateProvider: function ($templateFactory, User, $stateParams){ if(User.exists()){ var url = '/static/html/navs/' + User.get.type + '.html'; return $templateFactory.fromUrl(url); } else{ return false; } } } } }) .state('base.index', { url: '/', controller: 'loginController', templateUrl: 'static/html/landing/login.html' }) 

Controller function with github problem attempts:

 scope.login_submit = function(e){ e.preventDefault(); User.login(scope.login, function(res){ $state.transitionTo( 'base.dashboard', null, {reload: true, inherit: true, notify: true } ); }); }; 

Answer 1

I created a working example here . It comes from Q and A

This will be the corrected def state:

 .state('base', { abstract: true, views: { '': { template: '<ui-view></ui-view>', }, /* nav: { templateProvider: function ($templateFactory, User, $stateParams){ if(User.exists()){ var url = '/static/html/navs/' + User.get.type + '.html'; return $templateFactory.fromUrl(url); } else{ return false; } } },*/ nav: { templateProvider: ['User', '$templateRequest', function(User, templateRequest){ var tplName = 'templates/templateNotExists.html'; if(User.exists) { tplName = 'templates/templateExists.html'; } return templateRequest(tplName); }], }, } }) 

As we can see, we use a new function called '$templateRequest' to get the html template from the server based on the URL.

and these are controllers and services

 .controller('loginController', ['$scope', 'User', function ($scope, User) { $scope.User = User; }]) .factory('User', function(){ return { exists: false, }; }) 

And this is the contents of the base.index child state template:

 <input type="checkbox" ng-model="User.exists" /> <button ng-click="$state.go('base.index', null, {reload: true})" >reload</button> 

Check that everything is in effect here