javascript - 指令中的 Angular 条件模板；基于将范围变量与 promise 隔离的决策

Question

基本上我尝试对地址进行条件格式化。

我做了一个 plnkr 来可视化简化的问题: http://plnkr.co/edit/A5eV96H9eKIua9mJyKSL?p=preview

指令负责显示正确的模板:

app.directive('tqFormatAddress', function(){
  return {
    restrict: 'E',
    scope: {
      address:'='
    },
    link: function (scope, element, attrs) {
      switch(scope.address.country) {
      case "de":
         scope.template = 'adress-de.html';
         break;
      case "uk":
         scope.template = 'adress-uk.html';
         break;
      }
    },
    template: '<ng-include src="template"></ng-include>',
  };
});

这是做这样的事情的正确方法吗？

下一步是将代码集成到我的应用程序中。我使用 $resource 获取数据:

$scope.ansprechpartner = this.Ansprechpartner.get({id: $routeParams.id});

在 View 中:

<tq-format-address address="ansprechpartner.Dienstadresse"></tq-format-address>

现在我在指令中收到错误，因为资源尚未解析。

一种方法是将整个 ansprechpartner 提供给指令:

<tq-format-address address="ansprechpartner.Dienstadresse" promise="ansprechpartner"></tq-format-address>

然后做这样的事情(未经测试的演示代码):

    link: function (scope, element, attrs) {
      ansprechpartner.then(function () {
          switch(scope.address.country) {
          case "de":
             scope.template = 'adress-de.html';
             break;
          case "uk":
             scope.template = 'adress-uk.html';
             break;
          }
      });
    },

是否有另一种方法可以在没有 promise 的情况下做到这一点？

Answer 1

在这种情况下没有理由不使用 ngInclude。

如果您不想在目录中使用 Promise，则可以使用表达式，这样模板就会在地址对象发生变化时立即更改:

app.directive('tqFormatAddress', function(){
  return {
    restrict: 'E',
    scope: {
      address:'='
    },
    link: function (scope, element, attrs) {

      scope.template = function () {
        if (scope.address && scope.address.country)
          return 'adress-' + scope.address.country + '.html';

        return '';
      };
    },
    template: '<ng-include src="template()"></ng-include>',
  };
});