ui-router动态模板路径

Question

我正在使用ui-router 0.2.8。我想根据设备宽度加载模板。我可以毫无问题地获得设备的宽度，将其设置在范围等，但我可以弄清楚如何将其绑定到$
stateParams。我在另一个控制器中有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"
  })

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

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