CODEWITHSUNDEEP
angularjsangular-ui-router
apneadiving
apneadiving

Reputation: 115511

load ui router template after promise resolved

I'd like to get localized templates like:

so each time I have a templateUrl, I wrap it in a function which relies on a global variable bearing the locale like so:

templateUrl: function(){ return localizePath('/templates/main/index'); }
// returns '/templates/locale/main/index' depending on he locale

I have to retrieve the locale through an ajax call so I obviously need to pause state activation. I tried the following but it doesnt stop the router to try to fetch the template:

var initialized = false;
$rootScope.$on('$stateChangeStart', function(event, toState, toParams) {
  if (!initialized) {
    event.preventDefault();
    return sessionSvc.getLocale.then(function() {
      initialized = true;
      $state.go(toState, toParams);
    });
  }
});

Then the router tries to get the template at the following path: '/templates/undefined/main/index'.

How could I make the ui-router wait before trying to fetch the template?

Upvotes: 1

Views: 420

Answers (1)

Andreas Jägle
Andreas Jägle

Reputation: 12240

The templateUrl function doesn't work in an async way but you can do this by using a templateProvider function that returns a resolved template and wait for this call by a resolve property. If you only need this once, the best way is to probably define your resolve in the root state and cache the resulting value via a service.

See this answer for more details on how you could implement it: ui-router: async data in templateUrl function

Upvotes: 3

Related Questions