Angular UI-router 和使用动态模板

Question

我正在尝试使用 rootscope 值加载模板文件作为其名称。 我有一个初始化控制器，它将 $rootScope.template 设置为“whatever.html”，然后我的路由如下：

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

但这不起作用。它实际上冻结了整个 chrome，因此我必须终止进程才能停止它......我也用 templateUrl 尝试过，但没有结果。

那么我如何将我的动态模板文件与 UI-router 一起使用？

Answer 1

类似于你的其他问题（按我找到它们的顺序）：Angular and UI-Router, how to set a dynamic templateUrl，我也创建了a working plunker to show how to。它是如何工作的？

所以，如果这是状态调用：

<a href="#/parent/child/1">#/parent/child/1</a>
<a href="#/parent/child/2">#/parent/child/2</a>

这些将是状态：

  $stateProvider
    .state('parent', {
      url: '/parent',
      //abstract: true,
      templateUrl: 'views.parentview.html',
      controller: function($scope) {},
    });

  $stateProvider
    .state('parent.child', {
      url: '/child/:someSwitch',
      views: {
         // see more below

那么我们就可以使用这个templateProviderdefiniton：

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

}, 

我们可以看到异步结果的链接：

// first return of promise
return asyncstuff
  .then(function(x){
    // second return of a promise once done first
    return asyncstuff
      .then(function(y){  
       // again  
        return asyncstuff
          .then(function(z){
            return ... it
          }
      }

  }

这就是神奇的templateProvider 可以为我们做的事情......等到所有的承诺都得到解决，然后使用已知的模板名称甚至其内容继续执行。检查示例here。更多关于模板提供者：Angular UI Router: decide child state template on the basis of parent resolved object