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

在视图中：

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

在没有承诺的情况下，还有其他办法吗？

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

Answer 2

我使用attrs.$observe。

像这样：

attrs.$observe('address', function (val) {
  if (val !== undefined) {
    // call your switch function. 
  }
});

这是因为最初您最终会得到一个undefined地址。

我分叉并更新了您的plunker，看看它是否有帮助（尝试切换uk 对于address2对象中的de，反之亦然，带有address1）：

http://plnkr.co/edit/ktVyUjqZqCVxc3bXRFti?p=preview

指令中的角度条件模板;基于隔离范围变量的承诺决策

2 个答案: