承诺解决后加载ui路由器模板答案

【问题标题】：load ui router template after promise resolved承诺解决后加载ui路由器模板
【发布时间】：2016-07-26 17:15:11
【问题描述】：

我想获得本地化模板，例如：

'/templates/en/main/index'
'/templates/fr/main/index'

所以每次我有一个 templateUrl 时，我都会将它包装在一个函数中，该函数依赖于一个承载语言环境的全局变量，如下所示：

templateUrl: function(){ return localizePath('/templates/main/index'); }
// returns '/templates/locale/main/index' depending on he locale

我必须通过 ajax 调用来检索语言环境，所以我显然需要暂停状态激活。我尝试了以下方法，但它并没有阻止路由器尝试获取模板：

var initialized = false;
$rootScope.$on('$stateChangeStart', function(event, toState, toParams) {
  if (!initialized) {
    event.preventDefault();
    return sessionSvc.getLocale.then(function() {
      initialized = true;
      $state.go(toState, toParams);
    });
  }
});

然后路由器尝试在以下路径获取模板：'/templates/undefined/main/index'。

如何让 ui-router 在尝试获取模板之前等待？

【问题讨论】：

这不会帮助您解决模板问题。但我建议不要尝试为每个位置设置一个模板，而是使用一种不同语言的字典并根据所选语言环境加载不同的字典，查看github.com/angular-translate/angular-translate

标签： angularjs angular-ui-router

【解决方案1】：

templateUrl 函数不能以异步方式工作，但您可以通过使用返回已解析模板的 templateProvider 函数并通过 resolve 属性等待此调用来执行此操作。如果您只需要一次，最好的方法可能是在根状态下定义您的解析并通过服务缓存结果值。

有关如何实现它的更多详细信息，请参阅此答案：ui-router: async data in templateUrl function

【讨论】：