UI路由器动态模板路径 [英] ui-router dynamic template path

问题描述

我使用的UI路由器0.2.8。我想加载基于设备宽度的模板。我可以得到设备宽度没有问题，将其设置在范围等，但我可以计算出如何将其绑定到$ stateParams。我有可以访问的国家的控制器，它只是不向国家本身另一个控制器范围的变量。我已经试过templateProvider但这只是我返回一个字符串。还有什么我可以尝试以这个工作？

  .STATE（'名单'，{
摘要：真实，
网址：/表，
templateUrl：意见/'+ $ stateParams.somevalue +'/ page.html即可'，
    控制器：myCtrl
 }）
  .STATE（'list.first'，{
网址：/第一，
templateUrl：意见/ first.html
  }）
 

解决方案

您可以访问到 $ stateChangeStart 事件状态PARAMS。您还可以动态地更新 templateUrl 有作为。

因此​​，也许你的code可能是这个样子：

  angular.module（'应用'，['ui.router']）
.RUN（函数（$ rootScope）{
    $ rootScope。在$（'$ stateChangeStart'，函数（事件，toState，toParams）{
        如果（toState.name ==='名单'）{
          toState.templateUrl ='查看/'+ toParams.somevalue +'/ page.html即可;
        }
    }）;
}
 

您可能也想看看在的OnEnter回调按ui.router支持。我以前没有使用过这一点，但它可能会比把你的模板生成code到 $ stateChangeStart 事件整洁。

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"
  })

解决方案

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.

这篇关于UI路由器动态模板路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！