角和UI的路由器，如何设置一个动态templateUrl [英] Angular and UI-Router, how to set a dynamic templateUrl

问题描述

我怎么能获取使用的名称从我的数据库作为templateUrl名？

How could I use a name fetched from my database as a templateUrl filename?

我试过这样：

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

这似乎没有工作的工作，如果我的$ rootScope.template来自一个数据库查询。不知道为什么，但它不能正常工作。

Which doesn't seem to work work if my $rootScope.template comes from a database query. Don't know why, but it doesn't work.

如果在我的控制器我做$ rootScope.template =whatever.html一切工作正常，但如果我从数据库查询什么模板都发生。的console.log（$ rootScope.template）的templateProvider给我什么（查询本身的工作就好了）。

If in my controller I do $rootScope.template = "whatever.html" everything works ok, but if I query the template from database nothing happens at all. console.log("$rootScope.template") in templateProvider gives me nothing (the query itself works just fine).

请问查询只需花太长的时间，因此它没有准备好路由器或这里发生了什么？

Does the query simply take too long and it's therefore not ready for the router or what's happening here?

这是我做错了，我该如何解决这个问题？

That am I doing wrong and how can I fix it?

推荐答案

在本Q＆功放讨论;答：角UI路由器：父解析对象的基础上，决定孩子状态的模板，我们可以做，像这样

As discussed in this Q & A: Angular UI Router: decide child state template on the basis of parent resolved object, we can do that like this

这可能是一个服务打的角色，从服务器/数据库加载模板名称：

This could be a service playing role of "from Server/DB loading template name":

.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 确定指标应该是这样的：

Then the templateProvider defintion would look like this:

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

      }, 

在code应该是不言而喻的。勾选此回答和它的了解更多详情plunker

这篇关于角和UI的路由器，如何设置一个动态templateUrl的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！