Как да оценим атрибутите вътре в ъгловата директива - angularjs, angularjs-direktiva

Мой проблем

Работя върху ъглов компонент, който показва данни за потребителски обект. Съответният шаблон изглежда по следния начин и работи по предназначение:

<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

Възможните стойности за двата езика са или двубуквени изо кодове, или специални стойности "??" за „не е избран“ и „-“ за „други“.

Сега исках да създам ъглова директива, която да показва изображения на съответните знамена до текста на езика.

Опитах това:

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="/images/img/{{lang}}.png" />

и модифицирания шаблон на компонента:

За Томас това дава очакваната продукция:

Информация за потребителя Thomas Назад към списъка с потребители Име: Томас Роден език: de (немски флаг) Предпочитан език: bg (английски флаг)

Въпреки това, за Джеймс, който има двете специални езикови стойности, изходът изглежда така (защото няма файлове с изображения "img / -. Png" и "img / ??. Png":

Информация за потребителя James Назад към списъка с потребители Име: Джеймс Роден език: ?? (счупено изображение) Предпочитан език: - (счупено изображение)

Затова се опитах да предоставя два различни шаблона за директиви в зависимост от езиковата стойност. Разделям шаблона на директивата на два файла:

flag.template.flags.html

<span>{{lang}}</span><img ng-src="/images/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"
}
};
}
);

Това обаче не работи като атрибути.lang не съдържа оценената стойност (т.е. "de", "en" или "??"), но винаги съдържа "{{$ ctrl.user.nativeLanguage}}" или "{{$ ctrl.user.preferredLanguage}}" и затова винаги връща "flag.template.flags.html".

Въпросът ми

Има ли някакъв начин или да се оцени стойността на attributes.lang във функцията getTemplate () или да се уверите, че стойността е оценена, преди да бъде предадена на атрибута "lang" на директивата?

Отговори:

3 за отговор № 1

Просто използвайте един шаблон:

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

---