Angular 和 UI-Router，如何设置动态 templateUrl [英] Angular and UI-Router, how to set a dynamic templateUrl

问题描述

如何使用从我的数据库中获取的名称作为 templateUrl 文件名?

我已经试过了:

$stateProvider.state('/', {网址:'/'，意见:{页: {控制器:'HomeCtrl'，模板提供者:函数($templateFactory，$rootScope){console.log("$rootScope.template")return $templateFactory.fromUrl('/templates/' + $rootScope.template);}}}});

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

如果在我的控制器中执行 $rootScope.template = "whatever.html" 一切正常，但是如果我从数据库中查询模板，则什么也没有发生.templateProvider 中的 console.log("$rootScope.template") 什么也没给我(查询本身工作得很好).

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

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

解决方案

如本问答中所述A:Angular UI Router:根据父解析对象决定子状态模板，我们可以这样做>

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

.factory('GetName', ['$http', '$timeout',功能($http，$超时){返回 {得到:函数(ID){//让我们假装服务器异步延迟返回 $timeout(function(){//超级简化的开关...但是...变量名 = id == 1?views.view2.html":views.view2.second.html";返回{模板名称:名称}；}, 500);},};}]);

然后 templateProvider 定义看起来像这样:

 视图:{页": {模板提供者:函数($http，$stateParams，GetName){//从数据库获取模板名称的异步服务返回获取名称.get($stateParams.someSwitch)//现在我们有了名字.then(函数(对象){返回 $http//让我们请求一个模板.get(obj.templateName).then(功能(tpl){//haleluja...返回模板返回 tpl.data;});})},

代码应该是不言自明的.检查这个答案及其plunker 了解更多详情

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

I've tried this:

$stateProvider.state('/', {
  url: '/',
  views: {
    page: {
      controller: 'HomeCtrl',
      templateProvider: function($templateFactory, $rootScope) {
        console.log("$rootScope.template")
        return $templateFactory.fromUrl('/templates/' + $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.

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?

解决方案

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

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

      }, 

The code should be self explanatory. Check this answer and its plunker for more details

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