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>

这会产生预期的输出：

Information on user Thomas
Back to user list
Name: Thomas
Native language: de
Preferred language: en

这两种语言的可能值是双字符iso代码或特殊值＆＃39; ??＆＃39;因为没有选择＆＃39;和＆＃39; - ＆＃39;对于＆＃39;其他＆＃39;。

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

我试过了：

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" />

和修改后的组件模板：

对托马斯来说，这会产生预期的输出：

Information on user Thomas
Back to user list
Name: Thomas
Native language: de (german flag)
Preferred language: en (english flag)

但是，对于拥有两种特殊语言值的James，输出看起来像这样（因为没有图像文件＆＃34; img / - .png＆＃34;和＆＃34; img / ??。 PNG＆＃34;：

Information on user James
Back to user list
Name: James
Native language: ?? (broken image)
Preferred language: -- (broken image)

所以我试图提供两种不同的指令模板，具体取决于语言值。我将指令模板拆分为两个文件：

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不包含评估值（即＆＃39; de＆＃39;，＆＃39; en＆＃39;或者＆＃39; ??＆＃39;）但始终包含＆＃39; {{$ ctrl.user.nativeLanguage}}＆＃39;或者＆＃39; {{$ ctrl.user.preferredLanguage}}＆＃39;因此总是返回＆＃39; flag.template.flags.html＆＃39;。

我的问题

有没有办法在getTemplate（）函数中评估attributes.lang的值，或者确保在传递给＆＃34; lang＆＃34;之前评估值。指令的属性？

Answer 1

只需使用一个模板：

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

如何评估angular指令中的属性

我的问题

我的问题

1 个答案: