Angular和UI-Router,如何设置一个dynamic的templateUrl

我怎么能使用从我的数据库中获取的名称作为templateUrl文件名?

我试过这个:

$stateProvider.state('/', { url: '/', views: { page: { controller: 'HomeCtrl', templateProvider: function($templateFactory, $rootScope) { console.log("$rootScope.template") return $templateFactory.fromUrl('/templates/' + $rootScope.template); } } } }); 

如果我的$ rootScope.template来自数据库查询,这似乎不工作。 不知道为什么,但它不起作用。

如果在我的控制器中,我做$ rootScope.template =“whatever.html”一切正常,但如果我从数据库中查询模板什么都没有发生。 console.log(“$ rootScope.template”)在templateProvider没有给我什么(查询本身工作得很好)。

查询是否花了太长时间,因此没有为路由器准备好,或者这里发生了什么?

我做错了,我该如何解决?

正如在这个Q&A中所讨论的: Angular UI Router:根据父解决的对象来决定子状态模板 ,我们可以这样做

这可能是“从服务器/数据库加载模板名称”的服务扮演angular色:

 .factory('GetName', ['$http', '$timeout', function($http, $timeout) { return { get : function(id) { // let's pretend server async delay return $timeout(function(){ // super simplified switch... but ... var name = id == 1 ? "views.view2.html" : "views.view2.second.html" ; return {templateName : name}; }, 500); }, }; } ]); 

然后templateProvider defintion将如下所示:

  views: { "page": { templateProvider: function($http, $stateParams, GetName) { // async service to get template name from DB return GetName .get($stateParams.someSwitch) // now we have a name .then(function(obj){ return $http // let's ask for a template .get(obj.templateName) .then(function(tpl){ // haleluja... return template return tpl.data; }); }) }, 

代码应该是自我解释的。 检查这个答案和它的闯入者的更多细节

我创build了一个示例,它使用一些json作为服务器的数据加载, 在这里检查它。 这个$http将会收到什么(在我们简化的例子中)

 // dataFromServer.json { "1": "views.view2.html", "2": "views.view2.second.html" } 

所以这将通过$ http来,我们将使用它来返回名称

 .factory('GetName', ['$http', '$timeout', function($http, $timeout) { return { get : function(id) { // let's get data via $http // here it is the list, but // should be some GetById method return $http .get("dataFromServer.json") .then(function(response){ // simplified converter // taking the $http result and // by id gets the name var converter = response.data; var name = converter[id]; return {templateName : name}; }); }, }; } 

正如我们所看到的,这一次,我们真的去了服务器数据,使用$http的诀窍是要返回这个承诺

 return $http // see the return .get.... 

后来,我们又回到了那里面

 .... .then(function(response){ ... return {templateName : name}; }); 

那个例子就在这里