ui-router的 templateUrl 函数返回模板地址报错

Question

使用ui-router的 $stateProvider.state 写路由的时候，我想将 templateUrl 做成通过函数返回模板地址，然后一直报错，想请教一下大神。我这个页面中并未进行http请求，只是简单的放了个图片，不懂报错的原因

Answer 1

函数没有执行，所以templateUrl拿到的是一个函数而不是一个字符串。用闭包让函数立即执行：(function (xx) {xx})()

Answer 2

用闭包之后确实可以返回字符串，然后我传 $stateParams 参数却报 $stateParams is not defined ：
templateUrl: (function(params){
  return ......
})($stateParams),只有上面图中那种报错的写法才能打印出正确的$stateParams参数，换成闭包或引用外部函数虽然能解决无法返回字符串的问题但是无法传$stateParams进去，大神能再指导一下吗？

Answer 3

proposal.router.js文件
/**
 * 路由配置文件
 */
define([
], function () {
    'use strict';
    
    function stateProvider($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state('proposal', {
                abstract: true,
                url: '/proposal',
                templateUrl: 'common/layout/layout.html',
                resolve: {
                    deps: ['$ocLazyLoad', '$http', '$templateCache', function ($ocLazyLoad, $http, $templateCache) {
                        return $ocLazyLoad.load([
                            './modules/proposal/services/proposalService.js',
                        ]);
                    }]
                }
            })
            
            .state('proposal.management', {
                url: '/management',
                title: '利用计划管理',
                templateUrl: function($stateParams){
                    return './modules/proposal/modules/management/management.html';
                },  //这种写法是在ui-router的源码的注释说明中所推荐的，但是不知道我这为什么会[$http:badreq]
                group: 'proposal',
                rightName: '利用计划管理',
                resolve: {
                    deps: ['$ocLazyLoad', '$http', '$templateCache', function ($ocLazyLoad, $http, $templateCache) {
                        return $ocLazyLoad.load([
                            './modules/proposal/modules/management/managementCtrl.js',
                        ]);
                    }]
                }
            })
    }    stateProvider.$inject = ['$stateProvider', '$urlRouterProvider'];
    
    return stateProvider;
    
});
app.js文件
define([
    'angular',
    './proposal.router',
    './proposal.constant'
],function(angular, proposalRouter, proposalConstant){
    'use strict';
    var proposalApp = angular.module('proposal.app',[
    ]);
    
    proposalApp.config(proposalRouter);
    
    proposalApp.constant('PROPOSAL', proposalConstant.PROPOSAL);
    
    return proposalApp;
});

Answer 4

我试了下，貌似只有在controller下才能拿到$stateParams和$state对象。话说你为什么不考虑定义两个路由，而是要根据url参数来定义模版？即使可以这样做，用webpack这样的构建工具也无法识别啊。