Angular UI-router 和使用动态模板

问题描述

我正在尝试使用 rootscope 值加载模板文件作为它的名称.我有一个 init 控制器，它将 $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);
      }
    }
  }
});

但这行不通.它实际上冻结了整个 chrome，因此我必须终止进程才能停止它......我也用 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-router 一起使用?

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

推荐答案

类似于您的其他问题(为了我找到它们):Angular 和 UI-Router，如何设置动态模板 URL，我也创建了 一个展示如何操作的工作.它将如何运作?

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定义:

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 可以为我们做的事情......等到所有承诺都得到解决并继续使用已知的模板名称甚至其内容执行.在此处查看示例.更多关于模板提供者:Angular UI Router:根据父解析对象决定子状态模板

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

这篇关于Angular UI-router 和使用动态模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！