angularjs - ui-router 动态模板路径

Question

我正在使用 ui-router 0.2.8。我想根据设备宽度加载模板。我可以毫无问题地获得设备宽度，将其设置在范围内等，但我可以弄清楚如何将其绑定(bind)到 $stateParams。我在另一个 Controller 中有范围变量，它可以访问状态的 Controller ，它对状态本身不可用。我已经尝试过 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

您可以访问 $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 更简洁。事件。