Javascript 在UI路由器中动态更改视图状态中的templateUrl

在配置中定义后，是否可以更改和重新加载状态的模板

我想允许用户单击以更改当前页面的模板，我的想法是广播一个事件来更改stateProvider中定义的templateUrl，但不知道如何执行

app.config(function($stateProvider) {

    $stateProvider

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

---

您可以在$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事件更整洁

---

来源：

您可以像这样从

$stateParams

动态创建模板URL

app.config(function($stateProvider) {

    $stateProvider

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

---

你为什么要这么做？有许多解决方法，如：

ng if

ng include

，用于不同的html模板