Angularjs ui路由器动态模板路径

我使用的是ui路由器0.2.8。我想加载一个基于设备宽度的模板。我可以毫无疑问地获得设备宽度，在范围内设置它，等等，但是我可以找到如何将它绑定到$stateparms。我在另一个控制器中有scope变量，可以访问状态的控制器，但状态本身不可用。我尝试了templateProvider，但它只返回了一个字符串。我还可以尝试什么来让它工作

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

---

您可以在

$stateChangeStart

事件中访问状态参数。您还可以在那里动态更新

模板URL

因此，您的代码可能如下所示：

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支持的。我以前没有使用过它，但它可能比将模板生成代码放入

$stateChangeStart

事件更简洁。

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

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

有关更多信息，请参阅文档

---

这里的参考资料对于我了解如何在angular中创建动态模板非常有用，但我想用我自己的解决方案进行更新

• 基于Dipesh Kc的解决方案1（这对于为抽象状态重新定义父模板URL非常有用）注意，我使用了toParams而不是$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';
      },
  })
  

• 基于biofractal的解决方案2（无法使用此方法更新父模板URL）：

  .state（'contact'{
  url:“/contact/：folder/：view”
  })
  $rootScope.$on（“$stateChangeStart”，函数（事件、toState、toParams）{
  var customStates=[“联系人”]
  对于（var i=0；i

---

感谢您的回答，非常感谢。这是一个很好的回答，但它打破了用户界面路由器状态配置的概念。与在一个配置块中维护所有状态不同，您将在多个位置拆分配置，这只会在将来引起麻烦。请参阅Dipesh Kc的答案，以获得更具可配置性和易于维护的解决方案！虽然是“正确”的解决方案，但在某些情况下，仅使用注入的

$stateParams

可能是不够的。因此，@biofractal的答案可能是更一般的情况解决方案也可以将templateUrl设置为angular指令中的可注入函数吗？我猜不是…？我同意@RicardoPedroni。我必须使用另一个答案在toParams上设置一个isMobile变量，以便该变量可以通过$stateParams在templateUrl函数中使用。这样，我可以为移动设备、桌面等使用不同的模板。这很好，但这里有一个缺点，那就是如果我想在呈现视图之前发出http请求，并且根据从该请求返回的结果，如果我想更改视图，该怎么办。我无法在templateUrl函数中访问http

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