", restrict: "ECA" }; }); @ü.li:Listing 2: Verwendung der Direktive in HTML

Einsatz als Element:

Einsatz als Attribut:

Einsatz als CSS-Klasse:

@ü.li:Listing 3: Layout mit Bootstrap ohne eigene Direktiven

Zeile 1 - Spalte 1 Zeile 1 - Spalte 2 Zeile 1 - Spalte 3 Zeile 1 - Spalte 4

@ü.li:Listing 4: Layout mit Bootstrap und eigenen Direktiven Zeile 1 - Spalte 1 Zeile 1 - Spalte 2 Zeile 1 - Spalte 3 Zeile 1 - Spalte 4 @ü.li:Listing 5: AngularJS-Direktiven Bootstrap // ---- Direktive für mod.directive("row", function () { return { template: "

", restrict: "E", transclude: true }; }); // ---- Direktive für mod.directive("xs2", function () { return { template: "

", restrict: "E", transclude: true, replace: true, scope: { background: "@" } }; }); @ü.li:Listing 6: Flug-Objekte vom REST-Webdienst // Direktive mod.directive("flug", function () { return { template: "

Flugnummer {{flug.Id}}von {{flug.Abflugort}}nach {{flug.Zielort}}am {{flug.Datum | date}}

", restrict: "ECMA", replace: true, scope: { id: "@" }, controller: function ($scope, $http) { console.log("Controller!"); // ID des Flugs aus Scope der Direktive holen var params = { flugNummer: $scope.id }; // AJAX-Auruf $http.get("/api/flug", { params: params }).then((result) => { console.log("Datenabruf OK: " + JSON.stringify(result.data)); // Ergebnisobjekt im Scope der Direktive speichern $scope.flug = result.data; }).catch((reason) => { this.ausgabe = "Datenabruf Fehler: " + JSON.stringify(reason); }); } // Ende des Controllers }; // Ende DDO } // Ende Direktiven-Funktion ); // Ende Direktive @ü.li:Listing 7: Mehrfach-Transklusion durch link() !!! oben: link() -- bitte kursiv mod.directive("panel", function () { return { transclude: true, // Template mit zwei auszutauschenden Bereichen template: `

`, // Link-Funktion mit Transclude-Funktion als 5. Parameter link: function (scope, elem, attr, ctrl, transclude) { // Transclude-Funktion erhält den Inhalt des Aufrufers transclude(function (content) { // Schleife über die Inhalte angular.forEach(content, function (contentElement) { if (contentElement.attributes) { // Name für den Inhalt ermitteln aus HTML-Attribut content= var templateName = contentElement.attributes["content"].value; // Suche passede Vorlage zu dem Inhalt var templateElement = elem.find('[template="' + templateName + '"]'); // Inhalte in passendes Template einsetzen if (templateElement.length) { templateElement.replaceWith(contentElement); } else { contentElement.remove(); } } }); }); } }; }); @ü.li:Listing 8: Unabhängige Toggle-Button-Instanzen

JavaScript

TypeScript

C++

Java

Visual Basic

PHP

@ü.li:Listing 9: Abhängige Toggle-Button-Instanzen

JavaScript

TypeScript

C++

Java

Visual Basic

PHP

@ü.li:Listing 10: Implementierung von Togglebutton und Togglebuttonlist // ====================== Direktive 1 fuer die Liste von Toggle Button-Elementen mod.directive("togglebuttonlist", function ($compile) { return { restrict: 'EA', replace: true, transclude: true, template: '

', scope: { selectedValue: "=selected", options: "=options", id: "@id", stateChanged: "&stateChanged" }, controller: function ($scope) { console.log("togglebuttonlist controller: " + $scope.id); var Togglebuttons = []; // --- oeffentliche Funktion: Wird aufgerufen in Aufbauphase von allen untergeordneten Togglebutton-Instanzen! this.registerTogglebutton = function (togglebutton) { // Anfuegen an Liste Togglebuttons.push(togglebutton); if (togglebutton.value != $scope.selectedValue) { togglebutton.setState(false); } else { togglebutton.setState(true); } } // --- oeffentliche Funktion: Wird aufgerufen, wenn eine Togglebutton aktiviert wurde this.selectTogglebutton = function (selectedTogglebutton) { // selectedValue setzen if (selectedTogglebutton.isChecked) { $scope.selectedValue = selectedTogglebutton.value; } else { $scope.selectedValue = null; } // alle anderen registrieren Toggle Buttons deaktivieren angular.forEach(Togglebuttons, function (togglebutton) { if (selectedTogglebutton != togglebutton) { togglebutton.setState(false);} }); } } }; }); // ====================== Direktive 2 fuer ein Element der Liste mod.directive("togglebutton", function () { return { template: " ", //templateUrl: "/templates/coolTogglebuttonTemplate.html", transclude: true, restrict: "ECMA", replace: false, require: '^?togglebuttonlist', controllerAs: "ctrl", scope: { title: "@togglebutton", // Bindung an den Wert der Directive selbst isChecked: "=isChecked", stateChanged: "&onchange", value: "@value" }, controller: function ($scope) { // Funktion 1: Umschalten des Zustandes $scope.toggleState = function () { $scope.isChecked = !$scope.isChecked; } // Funktion 2: Setzen des Zustandes $scope.setState = function (newState) { $scope.isChecked = newState; } }, //--------------------------- compile: function (tElement, tAttrs) { var togglebuttonElement = tElement.children().first(); if (tAttrs.left && tAttrs.left.toLowerCase() == "true") { togglebuttonElement.css("width", "150px"); togglebuttonElement.css("text-align", "left"); } var this_link = this.link; return { pre: function (scope, iElement, iAttrs, togglebuttonlistController, transcludeFn) { }, post: function (scope, iElement, iAttrs, togglebuttonlistController, transcludeFn) { // delegiert an link() this_link(scope, iElement, iAttrs, togglebuttonlistController, transcludeFn); } } }, //--------------------------- Link-Funktion erhält durch require den Controller der übergeordneten Diretive link: function (scope, iElement, iAttrs, togglebuttonlistController, transcludeFn) { // Zugriff auf