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

Z时代
2024-01-10
分类：问答

如何使用从数据库中获取的名称作为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”，则一切正常，但是，如果我从数据库中查询模板，则什么也不会发生。templateProvider中的console.log（“

$ rootScope.template”）不能给我任何东西（查询本身可以正常工作）。

查询是否只是花了太长时间而没有为路由器准备就绪，或者发生了什么？

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

回答：

就像在此问答中所讨论的：Angular UIRouter：基于父解析对象决定子状态模板，我们可以像这样

这可能是“来自服务器/数据库加载模板名称”的服务：

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