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 callback。我之前没有使用它，但它可能比将模板生成代码放入$stateChangeStart事件更简洁。

Answer 3

这里的参考资料非常适合我找出如何以角度进行动态模板，但我想用自己的解决方案进行更新。

基于Dipesh Kc的解决方案1（这对于重新定义父模板抽象状态的抽象状态非常有用）请注意我曾使用过抛物语而不是$ 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（无法使用此方法更新父模板）：

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

ui-router动态模板路径

3 个答案: