试图根据常量在控制器中dynamic设置templateUrl
我想根据我在angularjs bootstrap中定义的预设常量来更改与控制器相关的templateUrl。 我无法弄清楚如何改变这一点。 我已经尝试过使用UrlRouteProvider，但一直没能弄清楚如何从文件系统中拉出html。 我卡在templateUrl上。
在下面的代码中，输出首先显示“svcc确实被传入了第一个函数的console.out，但是在templateUrl定义函数中，CONFIG是未定义的。
我打开其他方式来做到这一点。
var app = angular.module('svccApp', [ 'ui.router' ]); var myConstant = {}; myConstant.codeCampType = "svcc"; app.constant("CONFIG", myConstant); app.config(['$stateProvider', '$urlRouterProvider','CONFIG', function ($stateProvider, $urlRouterProvider,CONFIG) { console.log(CONFIG.codeCampType); $stateProvider .state('home', { url: '/home', //templateUrl: 'index5templateA.html', (THIS WORKS) templateUrl: function(CONFIG) { console.log('in templateUrl ' + CONFIG.codeCampType); if (CONFIG.codeCampType === "svcc") { return 'index5templateA.html'; } else { return 'index5templateB.html'; } }, controller: function ($state) { } }); }]); 我在这里创build了一个plunker你几乎在那里，只是语法是'templateProvider' ：
.state('home', { url: '/home', //templateUrl: 'index5templateA.html', (THIS WORKS) // templateUrl: function(CONFIG) { templateProvider: function(CONFIG) { ...
从doc中摘录：
模板
TemplateUrl
…templateUrl也可以是一个返回url的函数。 它需要一个预设的参数stateParams，它不被注入。TemplateProvider
或者你可以使用一个模板提供者函数，它可以注入，可以访问本地 ，并且必须返回模板HTML，如下所示：
所以在我们的情况下，这将是执行：
$stateProvider .state('home', { url: '/home', //templateUrl: 'index5templateA.html', (THIS WORKS) templateProvider: function(CONFIG, $http, $templateCache) { console.log('in templateUrl ' + CONFIG.codeCampType); var templateName = 'index5templateB.html'; if (CONFIG.codeCampType === "svcc") { templateName = 'index5templateA.html'; } var tpl = $templateCache.get(templateName); if(tpl){ return tpl; } return $http .get(templateName) .then(function(response){ tpl = response.data $templateCache.put(templateName, tpl); return tpl; }); }, controller: function ($state) { } });
检查这里的例子
另请检查：
- Angular UI Router：根据父parsing对象决定子状态模板
- Angular和UI-Router，如何设置一个dynamic的templateUrl
我必须添加另一个答案，有关angular1.3的全新function
$ templateRequest
$templateRequest服务使用$http下载提供的模板，一旦成功，将内容存储在$templateCache。
用法
$templateRequest(tpl, [ignoreRequestError]);
参数 – tplstring – HTTP请求模板URL
- ignoreRequestError（可选）boolean – 请求失败或模板为空时是否忽略exception
并更新plunker
templateProvider: function(CONFIG, $templateRequest) { console.log('in templateUrl ' + CONFIG.codeCampType); var templateName = 'index5templateB.html'; if (CONFIG.codeCampType === "svcc") { templateName = 'index5templateA.html'; } return $templateRequest(templateName); },
var app = angular.module('svccApp', [ 'ui.router' ]); var myConstant = {}; myConstant.codeCampType = "svcc"; app.config(['$stateProvider', '$urlRouterProvider','CONFIG', function ($stateProvider, $urlRouterProvider,CONFIG) { console.log(CONFIG.codeCampType); $stateProvider .state('home', { url: '/home', //templateUrl: 'index5templateA.html', (THIS WORKS) templateUrl: function() { if (myConstant.codeCampType === "svcc") { return 'index5templateA.html'; } else { return 'index5templateB.html'; } }, controller: function ($state) { } }); }]);
