试图根据常量在控制器中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) { } }); }]);