ui-router动态模板路径

Question

我正在使用ui-router 0.2.8.我想根据设备宽度加载模板.我可以毫无问题地获得设备宽度,将其设置在范围等,但我可以弄清楚如何将它绑定到$ stateParams.我在另一个控制器中有范围变量,可以访问状态控制器,它只是状态本身不可用.我已经尝试过templateProvider,但这只是给我一个字符串.我还能尝试什么来使其工作？

.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

您可能正在根据状态参数查找动态模板名称

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

有关更多信息,请参阅文档 https://github.com/angular-ui/ui-router/wiki#templates

Answer 2

您可以在$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';
        }
    });
}

您可能还想查看ui.router支持的onEnter回调.我之前没有使用它,但它可能比将模板生成代码放入$stateChangeStart事件中更整洁.