Wie werden Attribute innerhalb einer Winkeldirektive ausgewertet?

Mein Problem

Ich arbeite an einer Winkelkomponente, die Daten für ein Benutzerobjekt anzeigt. Die entsprechende Vorlage sieht folgendermaßen aus und funktioniert wie vorgesehen:

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

Dies erzeugt die erwartete Ausgabe:

Informationen zum Benutzer Thomas Zurück zur Benutzerliste Name: Thomas Muttersprache: de Bevorzugte Sprache: en

Die möglichen Werte für die beiden Sprachen sind entweder zweistellige ISO-Codes oder die Sonderwerte "??" für "nicht gewählt" und "-" für "andere".

Ich wollte jetzt eine eckige Direktive erstellen, um Bilder der entsprechenden Flags neben dem Sprachtext anzuzeigen.

Ich habe es versucht:

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

Mit dieser Direktivenvorlage:

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

und die modifizierte Komponentenvorlage:

Für Thomas ergibt dies die erwartete Ausgabe:

Informationen zum Benutzer Thomas Zurück zur Benutzerliste Name: Thomas Muttersprache: de Bevorzugte Sprache: en (englische Flagge)

Für James mit den beiden speziellen Sprachwerten sieht die Ausgabe jedoch so aus (da keine Bilddateien "img / -. Png" und "img / ??. Png" vorhanden sind):

Informationen zum Benutzer James Zurück zur Benutzerliste Name: James Muttersprache: ?? (kaputtes Bild) Bevorzugte Sprache: - (defektes Bild)

Deshalb habe ich versucht, je nach Sprachwert zwei verschiedene Direktivenvorlagen anzugeben. Ich habe die Direktivenvorlage in zwei Dateien aufgeteilt:

flag.template.flags.html

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

flag.template.no-flags.html

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

Und dann meine Anweisung wie folgt geändert:

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

Dies funktioniert jedoch nicht als Attribute.lang enthält nicht den ausgewerteten Wert (dh "de", "en" oder "??"), sondern immer "{{$ ctrl.user.nativeLanguage}}" oder "{{$ ctrl.user.preferredLanguage}}" und gibt daher immer "flag.template.flags.html" zurück.

Meine Frage

Gibt es eine Möglichkeit, den Wert von attributes.lang in der Funktion getTemplate () auszuwerten oder sicherzustellen, dass der Wert ausgewertet wird, bevor er an das Attribut "lang" der Direktive übergeben wird?

Antworten:

3 für die Antwort № 1

Verwenden Sie einfach eine einzige Vorlage:

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

---