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

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


...全文
85 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
咘之 2018-12-19
  • 打赏
  • 举报
回复
引用 1 楼 讨厌走开啦 的回复:
函数没有执行,所以templateUrl拿到的是一个函数而不是一个字符串。

用闭包让函数立即执行:(function (xx) {xx})()


用闭包之后确实可以返回字符串,然后我传 $stateParams 参数却报 $stateParams is not defined :
templateUrl: (function(params){
return ......
})($stateParams),

只有上面图中那种报错的写法才能打印出正确的$stateParams参数,换成闭包或引用外部函数虽然能解决无法返回字符串的问题但是无法传$stateParams进去,大神能再指导一下吗?
讨厌走开啦 2018-12-19
  • 打赏
  • 举报
回复
函数没有执行,所以templateUrl拿到的是一个函数而不是一个字符串。 用闭包让函数立即执行:(function (xx) {xx})()
讨厌走开啦 2018-12-19
  • 打赏
  • 举报
回复
我试了下,貌似只有在controller下才能拿到$stateParams和$state对象。 话说你为什么不考虑定义两个路由,而是要根据url参数来定义模版?即使可以这样做,用webpack这样的构建工具也无法识别啊。
咘之 2018-12-19
  • 打赏
  • 举报
回复
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;
});




引用 3 楼 讨厌走开啦 的回复:
整个文件贴出来看看。
讨厌走开啦 2018-12-19
  • 打赏
  • 举报
回复
整个文件贴出来看看。

87,920

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧