AngularJS控制器中如何修改ui-router路由state的template模板参数

ui-router加载状态的执行顺序是固定的：路由匹配 → 解析resolve依赖 → 执行templateProvider获取模板内容 → 初始化对应控制器。你当前在reviewController中给$stateParams.template赋值时，templateProvider已经执行完成，此时修改参数不会再触发模板重新加载，因此页面无法正常渲染。

方案1：直接在templateProvider中获取模板（推荐） #

templateProvider本身支持注入自定义服务，也支持返回Promise，你可以直接把模板获取逻辑移到这里，不需要通过$stateParams传递：

$stateProvider
    .state('review', {
        url: '/pendingPaymentReview',
        // 注入自定义的tempData服务
        templateProvider: function(tempData){
            // 直接返回模板内容，若getTemplate返回$http异步Promise，ui-router会自动等待请求完成再渲染
            return tempData.getTemplate();
        },
        controller: 'reviewController'
    });

方案2：跳转状态时提前传递模板参数 #

如果业务逻辑需要在跳转前确定模板，你可以在调用$state.go跳转至review状态时就传递模板参数，同时在状态配置中声明非URL参数：

1. 先修改路由配置：

$stateProvider
    .state('review', {
        url: '/pendingPaymentReview',
        // 声明非URL参数，不会出现在地址栏
        params: {
            template: null
        },
        templateProvider: function($stateParams){
            return $stateParams.template;
        },
        controller: 'reviewController'
    });

2. 在跳转前获取模板，通过$state.go传参：

// 示例为在其他控制器中跳转至review状态的逻辑
tempData.getTemplate().then(function(tpl) {
    $state.go('review', { template: tpl });
})

你当前代码中tempData.getTemptlate()存在拼写错误，正确拼写应为getTemplate，该笔误也可能导致模板获取失败。

内容的提问来源于stack exchange，提问作者Azeh Gideon