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没有给我什么（查询本身工作得很好）。

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

我做错了，我该如何解决？

Answer 1

正如在这个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; }); }) }, 

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

Answer 2

我创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}; }); 

那个例子就在这里