Eine kurze Diskussion über die 4 Designmuster in Winkelanweisungen

In diesem Artikel werden Ihnen die 4 Designmuster in der angular-Direktive vorgestellt. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

[Verwandte Empfehlung: „Angular-Tutorial“]

Der Funktionsumfang an Anweisungen ist sehr umfangreich, aber wir haben die Pareto-Verteilung von Anweisungen entdeckt: Eine große Anzahl von in Angular geschriebenen Anweisungen dient nur der Benutzerfreundlichkeit und Diese Anweisungen stellen einen sehr kleinen Teil des Musters dar und können grob in vier Kategorien unterteilt werden:

• Nur-Render-Anweisungen – diese Anweisungen rendern die Daten im Bereich, ändern sie jedoch nicht.
• Event-Handling-Wrapper – Diese Anweisungen kapseln Ereignishandler für die Interaktion mit Datenbindungen wie ngClick. Diese Anweisungen rendern keine Daten.
• Bidirektionale Anweisungen – Diese Anweisungen rendern und ändern Daten.
• Es integriert die Vorlagenanweisungen der oben genannten drei Funktionen.

Nur Render-Anweisungen

Diese Anweisungen folgen einem einfachen Entwurfsmuster: Sie überwachen Variablen und aktualisieren DOM-Elemente, um Änderungen in Variablen wie ngClass, ngBind widerzuspiegeln.

angular.module('app', []).
	directive('myBackgroundImage', function () {
		return function (scope, element, attrs) {
			scope.$watch(attrs.myBackgroundImage, function (newVal, oldVal) {
				element.css('background-image', 'url(' + ')');
			});
		}
	});

Event-Handling-Wrapper

Auf einer hohen Ebene können Event-Handler-Direktiven DOM-Ereignisse mit Datenbindungen binden, indem sie die $apply-Funktion wie ngClick und einen ähnlichen benutzerdefinierten Klick unten aufrufen.

angular.module('app', []).
directive('myNgClick', function () {
	return function (scope, element, attrs) {
		element.click(function () {
			scope.$eval(attrs.myNgClick);
			scope.$apply();
		});
	}
});

Bidirektionale Direktiven

Dieser Modus verwendet sowohl die Render-Only-Direktive als auch das Event-Handler-Muster, um Direktiven zu erstellen, die den Status von Variablen steuern.

angular.module('app', []).
directive('myNgClick', function () {
	return function (scope, element, attrs) {
		//监视和更新
		scope.$watch(attrs.toggleButton, function (v) {
			element.val(!v ? 'Disable' : 'Enable');
		});
 
		//事件处理程序
		element.click(function () {
			scope[attrs.toggleButton] = 
				!scope[attrs.toggleButton];
			scope.$apply();
		});
	}
});

Erweiterte Vorlagenanweisungen

Vorlagenanweisungen können leistungsstarke Anweisungen erstellen, indem sie Vorlagenoptionen festlegen. Tatsächlich entspricht die vom obigen Beispiel zurückgegebene Funktion der Linkfunktion der Vorlage.

angular.module('app', []).
directive('imageCarousel', function () {
	return {
		templateUrl: 'view/index.html',
		controller: carouselController,
		scope: {},
		link: function (scope, element, attrs) {
			scope.$parent.$watch(attrs.imageCarousel, function (v){
				scope.images = v;
			});
		}
	}
});

Es gibt viele andere Optionen für Vorlagenoptionen. Bitte lesen Sie meine anderen Blog-Beiträge. Der Schwerpunkt liegt hier auf Designmustern.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über die 4 Designmuster in Winkelanweisungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!