如何评估角度指令中的属性

Question

我的问题

我正在开发一个显示用户对象数据的角度组件。相应的模板如下所示并按预期工作：

<div>
  <h1>Information on user {{$ctrl.user.name}}</h1>

  <p><a href="#!/users/">Back to user list</a></p>

  <dl>
    <dt>Name:</dt><dd>{{$ctrl.user.name}}</dd>
    <dt>Native language:</dt><dd>{{$ctrl.user.nativeLanguage}}</dd>
    <dt>Preferred language:</dt><dd>{{$ctrl.user.preferredLanguage}}"></dd>
  </dl>
</div>

这会产生预期的输出：

关于用户 Thomas 的信息 返回用户列表 姓名：托马斯 母语：de 首选语言：en

两种语言的可能值是两个字符的 iso 代码或特殊值 '??'代表“未选择”，“--”代表“其他”。

我现在想创建一个角度指令来在语言文本旁边显示相应标志的图像。

我试过了：

angular.
module('flag').
controller('FlagController', ['$scope',
    function FlagController($scope) {
    }
  ]).
directive('flag',
  function() {
    return {
      restrict: 'E',
      scope: {
         lang: '@'
      },
      templateUrl: 'flag-template.html'
    };
  }
);

使用此指令模板：

<span>{{lang}}</span><img ng-src="img/{{lang}}.png" />

以及修改后的组件模板：

对于 Thomas，这会产生预期的输出：

关于用户 Thomas 的信息 返回用户列表 姓名：托马斯 母语：de（德国国旗） 首选语言：en（英国国旗）

但是，对于拥有两个特殊语言值的 James，输出看起来是这样的（因为没有图像文件“img/--.png”和“img/??.png”：

用户 James 的信息 返回用户列表 姓名：詹姆斯 母语： ？？ （损坏的图像） 首选语言：--（损坏的图像）

所以我尝试根据语言值提供两个不同的指令模板。我将指令模板拆分为两个文件：

flag.template.flags.html

<span>{{lang}}</span><img ng-src="img/{{lang}}.png" />

flag.template.no-flags.html

<span>{{lang}}</span>

然后修改我的指令如下：

angular.
module('flag').
controller('FlagController', ['$scope',
  function FlagController($scope) {
    var self = this;
    console.log("FlagController, scope=", $scope);
  }
]).
directive('flag',
  function() {
    return {
      restrict: 'E',
      scope: {
        lang: '@'
      },
      templateUrl: function getTemplate(elements, attributes) {
        console.log("- lang=", attributes.lang);
        
        if (attributes.lang) {
          if ('??' === attributes.lang || '--' === attributes.lang) {
            return 'flag/flag.template.no-flags.html'
          } else {
            return 'flag/flag.template.flags.html'
          }
        }
        return 'flag/flag.template.no-flags.html'
      }
    };
  }
);

但是，这不起作用，因为 attributes.lang 不包含评估值（即 'de'、'en' 或 '??'）但始终包含 '{{$ctrl.user.nativeLanguage}}' 或'{{$ctrl.user.preferredLanguage}}'，因此总是返回'flag.template.flags.html'。

我的问题

有什么方法可以在 getTemplate() 函数中评估 attributes.lang 的值，或者确保在传递给指令的“lang”属性之前评估该值？

Answer 1

只使用一个模板：

<span>{{lang}}</span>
<img ng-if="lang !== '--' && lang !== '??'" ng-src="img/{{lang}}.png" />