Angular Route: Define templateUrl based on rootScope condition

Question

I am trying to dynamically change the templateUrl in the route. The problem is that in my function, the $rootScope with its parameter is not available.

Does someone has an idea to solve that?

angular.module('name').config(function ($routeProvider) {
  $stateProvider.state('tickets', {
    url: "/tickets",
    templateUrl: checkPartnerType,
    controller: 'TicketListController'
  })
 });

function checkPartnerType($rootScope){ 

    if( $rootScope.user.partner.type == 'NAT'){   
        return "core/partials/b2c-ticket-list.html"; 
    }else{
        return "core/partials/b2b-ticket-list.html"; 
    }
}

You can try injecting $rootScope into the config function next to routeprovider but not sure if that will work. Honestly this is something that should be solved using state resolves and/or url params — hsiung, Jul 17 '16 at 15:02

score 0 · Answer 1 · edited May 23 '17 at 12:08

As documented here

$stateProvider

The setting templateUrl:

html template as a string or a function that returns an html template as a string which should be used by the uiView directives. This property takes precedence over templateUrl.

If template is a function, it will be called with the following parameters:

{array.<object>} - state parameters extracted from the current $location.path() by applying the current state

So, the only param could be state params. But we have another option - templateProvider:

Provider function that returns HTML content string.

templateProvider:
  function(MyTemplateService, params) {
    return MyTemplateService.getTemplate(params.pageId);
  }

With templateProvider, we can use all IoC power, and ask for any service to be injected. Check these:

Angular Route: Define templateUrl based on rootScope condition

1 Answers1

$stateProvider