Question

在config中定义后，是否可以更改并重新加载状态模板？

我想让用户点击更改当前页面的模板，我的想法是广播一个事件，改变在stateProvider中定义的templateUrl，但不知道怎么做。

app.config(function($stateProvider) {

    $stateProvider

        .state('login', {
            url: '/login',
            cache: false,
            templateUrl: '/_/admin/templates/login.html',
            controller: 'login'
        });
});

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事件更简洁。

来源：ui-router dynamic template path

Answer 2

您可以像这样从$stateParams动态创建模板网址。

app.config(function($stateProvider) {

    $stateProvider

        .state('login', {
            url: '/login',
            cache: false,
            templateUrl: ['$stateParams', function ($stateParams) {
              return 'your template';
            }],
            controller: 'login'
        });
});

在角度UI路由器中即时更改视图中的templateUrl状态

2 个答案: