Como avaliar atributos dentro de uma diretiva angular - angularjs, angularjs-directive

Meu problema

Estou trabalhando em um componente angular que exibe dados para um objeto de usuário. O modelo correspondente tem a seguinte aparência e funciona conforme o esperado:

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

Isso produz a saída esperada:

Informações sobre o usuário Thomas Voltar para a lista de usuários Nome: Thomas Língua nativa: de Idioma preferido: en

Os valores possíveis para os dois idiomas são códigos iso de dois caracteres ou os valores especiais "??" para "não escolhido" e "-" para "outro".

Agora, eu queria criar uma diretiva angular para mostrar imagens dos sinalizadores correspondentes ao lado do texto do idioma.

Eu tentei isso:

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

Com este modelo de diretiva:

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

e o modelo de componente modificado:

Para Thomas, isso produz a saída esperada:

Informações sobre o usuário Thomas Voltar para a lista de usuários Nome: Thomas Língua nativa: de (bandeira alemã) Idioma preferido: en (bandeira inglesa)

No entanto, para James que tem os dois valores de idioma especiais, a saída é semelhante a esta (porque não há arquivos de imagem "img / -. Png" e "img / ??. Png":

Informações sobre o usuário James Voltar para a lista de usuários Nome: James Língua nativa: ?? (imagem quebrada) Idioma preferido: - (imagem quebrada)

Portanto, tentei fornecer dois modelos de diretiva diferentes, dependendo do valor do idioma. Eu divido o modelo de diretiva em dois arquivos:

flag.template.flags.html

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

flag.template.no-flags.html

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

E então modifiquei minha diretiva da seguinte maneira:

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

No entanto, isso não está funcionando como atributos.lang não contém o valor avaliado (ou seja, "de", "en" ou "??"), mas sempre contém "{{$ ctrl.user.nativeLanguage}}" ou "{{$ ctrl.user.preferredLanguage}}" e, portanto, sempre retorna "flag.template.flags.html".

Minha pergunta

Existe alguma maneira de avaliar o valor de attribute.lang dentro da função getTemplate () ou de garantir que o valor seja avaliado antes de ser passado para o atributo "lang" da diretiva?

Respostas:

3 para resposta № 1

Basta usar um único modelo:

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

---