Question

如何使用从我的数据库中获取的名称作为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 =＆＃34; whatever.html＆＃34;一切正常，但如果我从数据库查询模板，根本没有任何事情发生。 templateProvider中的console.log（＆＃34; $ rootScope.template＆＃34;）什么都没有给我（查询本身工作正常）。

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

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

Answer 1

如本Q＆amp; S中所述。答：Angular UI Router: decide child state template on the basis of parent resolved object，我们可以这样做

这可以是服务器/数据库加载模板名称＆＃34;的服务扮演角色＆＃34;：

.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定义看起来像这样：

  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及其plunker了解详情

Answer 2

我创建了一个示例，它使用一些json作为来自服务器的数据加载，检查它here。这就是$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}; 
});

那Example is here

Angular和UI-Router，如何设置动态templateUrl

2 个答案: