角UI路由器，并使用动态模板 [英] Angular UI-router and using dynamic templates

问题描述

我试图加载使用rootscope值作为它的名称的模板文件。
我有一个初始化控制器，它设置$ rootScope.template为whatever.html，然后我有我的路线是这样的：

I'm trying to load a template file using a rootscope value as for it's name. I have a init controller which sets the $rootScope.template to "whatever.html", then I have my route like this:

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

但是，这并不正常工作。它实际上冻结了整个铬，使我有为了阻止它杀死进程......我也有templateUrl但没有结果试过这个。

But this doesn't work. It actually freezes the whole chrome so that I have to kill the process in order to stop it... I've also tried this with templateUrl but with no results.

因此​​，如何，我可以用我的动态模板文件与UI的路由器？

So how could I use my dynamic template file with UI-router?

推荐答案

类同您的其他问题的（为了我发现他们）的：的角和UI的路由器，如何设置一个动态templateUrl ，我还创建的工作plunker以显示如何的。它是如何工作的？

Similiar to your other question (in order I found them): Angular and UI-Router, how to set a dynamic templateUrl, I also created a working plunker to show how to. How it would work?

所以，如果这将是状态的呼叫：

So, if this would be state call:

<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

然后，我们可以用这个 templateProvider definiton：

Then we can use this templateProvider definiton:

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

}, 

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

What we can see is chaining of async results:

// 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 可以为我们做......等到所有的承诺都得到解决，并继续与已知的模板名称，甚至它的内容执行。检查的例子 rel=\"nofollow\">。更多关于模板提供商：角UI路由器：决定父解析对象

And that's what the magical templateProvider can do for us... wait until all promises are resolved and continue execution with known template name and even its content. Check the example here. More about template provider: Angular UI Router: decide child state template on the basis of parent resolved object

这篇关于角UI路由器，并使用动态模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！