Ich fange gerade mit anglejs an und arbeite daran, einige alte JQuery-Plugins in Angular-Direktiven zu konvertieren. Ich möchte eine Reihe von Standardoptionen für meine (Element-) Direktive definieren, die durch Angabe des Optionswerts in einem Attribut überschrieben werden können.
Ich habe mich nach der Art und Weise umgesehen, wie andere dies getan haben, und in der Angular-UI - Bibliothek scheint die ui.bootstrap.pagination etwas Ähnliches zu tun.
Zunächst werden alle Standardoptionen in einem konstanten Objekt definiert:
.constant('paginationConfig', {
itemsPerPage: 10,
boundaryLinks: false,
...
})
Dann wird eine getAttributeValue
Dienstprogrammfunktion an die Direktivensteuerung angehängt:
this.getAttributeValue = function(attribute, defaultValue, interpolate) {
return (angular.isDefined(attribute) ?
(interpolate ? $interpolate(attribute)($scope.$parent) :
$scope.$parent.$eval(attribute)) : defaultValue);
};
Schließlich wird dies in der Verknüpfungsfunktion verwendet, um Attribute als einzulesen
.directive('pagination', ['$parse', 'paginationConfig', function($parse, config) {
...
controller: 'PaginationController',
link: function(scope, element, attrs, paginationCtrl) {
var boundaryLinks = paginationCtrl.getAttributeValue(attrs.boundaryLinks, config.boundaryLinks);
var firstText = paginationCtrl.getAttributeValue(attrs.firstText, config.firstText, true);
...
}
});
Dies scheint eine ziemlich komplizierte Einrichtung für etwas zu sein, das so Standard ist wie das Ersetzen einer Reihe von Standardwerten. Gibt es andere übliche Möglichkeiten, dies zu tun? Oder ist es normal, immer eine Dienstprogrammfunktion wie getAttributeValue
und Analyseoptionen auf diese Weise zu definieren? Ich bin daran interessiert herauszufinden, welche unterschiedlichen Strategien Menschen für diese gemeinsame Aufgabe haben.
Als Bonus ist mir auch nicht klar, warum der interpolate
Parameter erforderlich ist.
quelle
ui.bootstrap.pagination
die Dinge komplizierter werden? Dachte, dass bei Verwendung der Kompilierungsfunktion später vorgenommene Attributänderungen nicht berücksichtigt würden, dies scheint jedoch nicht der Fall zu sein, da zu diesem Zeitpunkt nur die Standardeinstellungen festgelegt werden. Vermutlich muss hier ein Kompromiss geschlossen werden.compile
Sie können keine Attribute lesen, die interpoliert werden sollten, um einen Wert zu erhalten (der Ausdruck enthält). Wenn Sie jedoch nur überprüfen möchten, ob das Attribut leer ist, funktioniert es ohne Kompromisse für Sie (bevor das Interpolationsattribut eine Zeichenfolge mit Ausdruck enthält).ui.bootstrap.pagination
Beispiel bewirkt, fand ich dieses sehr nützliche Beispiel: jsfiddle.net/EGfgHlink
eine Funktion in Ihrercompile
Option zurückgeben können. doc hierattributes.foo = '["one", "two", "three"]'
stattattributes.foo = ["one", "two", "three"]
Verwenden Sie das
=?
Flag für die Eigenschaft im Bereichsblock der Direktive.quelle
=?
ist verfügbar seit 1.1.xtrue
oderfalse
als Werte akzeptieren könnte, würden Sie (glaube ich)$scope.hasName = angular.isDefined($scope.hasName) ? $scope.hasName : false;
stattdessen zB verwenden wollen.=?
nicht mit einseitiger Bindung@?
.link
Funktion eingestellt werden? Nach meinem Verständnis sollte das Zuweisen während des Zykluslink
einen$scope.$apply()
Zyklus vermeiden , nicht wahr?Ich verwende AngularJS v1.5.10 und habe festgestellt, dass die
preLink
Kompilierungsfunktion zum Festlegen von Standardattributwerten ziemlich gut funktioniert .Nur eine Erinnerung:
attrs
Enthält die unformatierten DOM-Attributwerte, die immer entwederundefined
oder Zeichenfolgen sind.scope
Enthält (unter anderem) die DOM-Attributwerte, die gemäß der bereitgestellten Isolationsbereichsspezifikation ( / / / usw.) analysiert wurden .=
<
@
Kurzer Ausschnitt:
quelle