Путь динамического шаблона ui-router

Я использую ui-router 0.2.8. Я хочу загрузить шаблон на основе ширины устройства. Я могу получить ширину устройства без проблем, установить его в области видимости и т.д., Но я могу выяснить, как связать его с $stateParams. У меня есть переменная области видимости в другом контроллере, к которой можно получить доступ к контроллеру состояния, который он просто недоступен для самого состояния. Я пробовал шаблонProvider, но это только возвращает мне строку. Что еще я могу попробовать, чтобы это работало?

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

Ответы

Ответ 1

Вы можете получить доступ к параметрам состояния в событии $stateChangeStart. Вы также можете динамически обновлять templateUrl там.

Итак, возможно, ваш код может выглядеть примерно так:

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';
        }
    });
}

Вы также можете взглянуть на onEnter callback, поддерживаемый ui.router. Я не использовал это раньше, но он может быть более аккуратным, чем создание кода генерации шаблона в событии $stateChangeStart.

Ответ 2

Возможно, вы ищете динамическое имя шаблона на основе параметров состояния

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

Дополнительную информацию см. в документах https://github.com/angular-ui/ui-router/wiki#templates

Ответ 3

Эта ссылка была для меня отличной, когда я выяснял, как делать динамические шаблоны в angular, но я хотел бы обновить свое решение.

Решение 1 на основе Dipesh Kc (это отлично работает для переопределения родительского шаблонаUrl для абстрактных состояний). Заметьте, что я использовал forParams вместо $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';
    },
})

Решение 2 на основе биофрактала (нет способа обновить родительский шаблонUrl, используя этот метод):

.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;
        }
    }
});