asynchronous - 在 AngularJS 指令中使用异步配置

Question

我有一个指令，它查看配置以确定要使用的模板。它曾经运作良好；我有一个配置服务，它只返回一个带有配置值的对象，然后我做了这样的事情:

if (Config.Values.ReleaseVersion < 1.0) {
  template = 'partials/pagebeta.html';
}
else {
  template = 'partials/page.html';
}
templateUrl: template

最近出现了一个问题。我的配置服务必须从 json 文件获取值。现在，因为获取配置是异步的，所以我现在从配置服务传回一个 promise 。这在我的指令中给我带来了问题 - 我不能这样做:

var template;
Config.then(function(config) {
  if (config.Values.ReleaseVersion < 1.0) {
    template = 'partials/pagebeta.html';
  } 
  else {
    template = 'partials/page.html';
  }
});
templateUrl: template

如有任何建议，我们将不胜感激!

Answer 1

如果您的 templateUrl 取决于异步计算的值，您将无法再使用指令的 templateUrl 属性，并且您将不得不使用较低级别的 API，即 $http 和 $compile。

大致上，您需要做的(仅在链接函数中可能)是使用 $http 检索模板的内容(不要忘记涉及 $templateCache!)然后“手动”编译模板的内容。

听起来可能需要大量工作，但实际上非常简单。我建议查看 ngInclude 指令 sources使用此模式的地方。