ui-router dynamic template path

Question

I'm using ui-router 0.2.8. I'm wanting to load a template based on device width. I can get the device width without issue, set it in the scope etc but I can figure out how to bind it to $stateParams. I have the scope variable in another controller which can be accessed the state's controller it's just not available to the state itself. I've tried the templateProvider but that is only returning me a string. What else can I try in order for this to work?

.state('list', {
abstract: true,
url: "/list",
templateUrl: 'views/'+$stateParams.somevalue+'/page.html',
    controller: "myCtrl"
 })
  .state('list.first', {
url: "/first",
templateUrl: "views/first.html"
  })

Answer 1

You can access to state params in the $stateChangeStart event. You can also dynamically update the templateUrl there as well.

So perhaps your code might look something like this:

angular.module('app', ['ui.router'])
.run(function($rootScope){
    $rootScope.$on('$stateChangeStart', function(event, toState, toParams) {
        if (toState.name === 'list') {
          toState.templateUrl = 'views/'+toParams.somevalue+'/page.html';
        }
    });
}

You might also want to take a look at the onEnter callback supported by ui.router. I have not used this before but it might be neater than putting your template generating code into the $stateChangeStart event.

Answer 2

You might be looking for dynamic template name based on the state params

 $stateProvider.state('contacts', {
   templateUrl: function ($stateParams){
     return '/partials/contacts.' + $stateParams.filterBy + '.html';
   }
 })

See the docs for more information https://github.com/angular-ui/ui-router/wiki#templates

Answer 3

This reference here was great for me figuring out how to do dynamic templates in angular, but I'd like to update with my own solution.

• Solution 1 based on Dipesh Kc's (this works great for redefining parent templateUrl for abstract states) Notice I used toParams instead of $stateParams:

  // custom parent template
  .state('template', {
      abstract: true,
      url: "/tm/:tmfolder/:tmview",
      templateUrl: function (toParams) {
          return 'views/' + toParams.tmfolder + '/' + toParams.tmview + '.html';
      },
  })
  .state('template.contacts', {
      url: "/contacts/:folder/:view",
      templateUrl: function (toParams) {
          return 'views/' + toParams.older + '/' + toParams.view + '.html';
      },
  })
  

• Solution 2 based on biofractal's (there is no way to update a parent templateUrl using this method):

  .state('contact', {
      url: "/contact/:folder/:view"
  })
  
  $rootScope.$on('$stateChangeStart', function (event, toState, toParams) {
      var customStates = ["contact"]
      for (var i = 0; i < customStates.length; i++) {
          if (toState.name.indexOf(customStates[i]) != -1) {
              toState.templateUrl = 'views/' + toParams.folder + '/' + toParams.view + '.html';
              break;
          }
      }
  });