So richten Sie benutzerdefinierte AngularJs-Direktiven und die Namenskonvention für benutzerdefinierte Direktiven ein

AngularJS bietet uns die Funktion benutzerdefinierter Anweisungen. Mit dieser Funktion können wir einige Tags anpassen, um unsere eigene Entwicklung zu unterstützen. Im folgenden Inhalt werde ich mit Ihnen teilen, wie Sie benutzerdefinierte Anweisungen in AngularJs durch Direktive und Einschränkung festlegen.

1. Beschreibung des Einschränkungsattributs der benutzerdefinierten Direktivenanweisung von AngularJ:

Heutiger allgemeiner HTML-Teil:

<h1 zym-blog></h1>

JavaScript-Teil:

var m = angular.module('app', []);
m.directive('zymBlog', [function(){
	return {
		restrict : 'AEC',
		template : &#39;<p>hello world</p>&#39;,
		replace : true
	};
}]);

Legen Sie eine benutzerdefinierte Anweisung über die Anweisung fest. Der erste Parameter ist der Anweisungsname und der zweite Parameter ist ein Array, einschließlich einer Rückruffunktion. Der Rückgabewert der Funktion ist ein JSON-Objekt, wobei:

„restrict“ stellt die Form der Anweisung dar: A ist ein Attribut, E ist ein Element und C ist eine Klasse. Um Verwechslungen mit der Klasse im Stil zu vermeiden, wird C nicht empfohlen.

Vorlage ist der Vorlageninhalt, der den Inhalt angibt, der mithilfe dieses benutzerdefinierten Attributs in das Tag eingefügt werden soll.

Der Wert von „replace“ ist standardmäßig „false“. Wenn er „true“ ist, bedeutet dies, dass das Tag im HTML-Code, der diese benutzerdefinierte Anweisung verwendet, durch das Tag in der Vorlage ersetzt werden sollte. Beachten Sie, dass bei Verwendung von „replace“ die Vorlage HTML-Elemente und nicht nur ein paar Wörter enthalten muss, andernfalls meldet Angular einen Fehler.

Sehen wir uns ein anderes Attribut an. templateUrl ist die referenzierte Vorlagenadresse:

var m = angular.module('app', []);
m.directive('zymBlog', [function(){
	return {
		restrict : 'AEC',
		templateUrl : './46-1.html',
		replace : true
	};
}]);

Beachten Sie, dass hier der Vorlageninhalt der templateUrl entspricht muss ein HTML-Tag-Element enthalten.

2. Standard-Namenskonvention für benutzerdefinierte Direktiven:

Direktiven-Direktivennamen verwenden die Benennung in Kamel-Groß-/Kleinschreibung, z. B. [zymBlog], und wenn sie im HTML-Code aufgerufen werden, benötigen Sie um vor den Großbuchstaben einen Bindestrich einzufügen, z. B. [zym-blog].

3. Funktionsoperation der benutzerdefinierten Anweisungsvorlage:

Vorlage kann nicht nur eine Zeichenfolge, sondern auch eine Funktion sein, zum Beispiel:

var m = angular.module('app', []);
m.directive('zymBlog', [function(){
	return {
		restrict : 'AEC',
		template : function(){
			return &#39;<p>赵一鸣个人技术博客</p>&#39;;
		},
		replace : true
	};
}]);

4. Transclude-Attribut für benutzerdefinierte Anweisungen:

Es gibt eine Situation, in der eine benutzerdefinierte Anweisung in HTML verwendet wird, sich jedoch Inhalt im Tag befindet. In diesem Fall handelt es sich um den Inhalt der benutzerdefinierten Anweisung Der Inhalt ersetzt den ursprünglichen Inhalt des Tags, daher müssen Sie ein Attribut hinzufügen, um dieses Problem zu lösen (ng-transclude):

html-Teil:

<h1 zym-blog>赵一鸣博客http://www.zymseo.com</h1>

js-Teil:

var m = angular.module('app', []);
m.directive('zymBlog', [function(){
	return {
		restrict : 'AEC',
		template : function(){
			return &#39;<p>赵一鸣AngularJs学习笔记<span ng-transclude></span></p>&#39;;
		},
		replace : true,
		transclude : true
	};
}]);

Nachdem Sie den Wert von ng-transclude auf true gesetzt haben, müssen Sie ein weiteres Tag innerhalb der benutzerdefinierten Anweisung hinzufügen und ng-transclude angeben, damit der Inhalt des ursprünglichen HTML-Tags in diesem Tag platziert wird!

Verwandte Empfehlungen:

Implementierungsfähigkeiten von benutzerdefinierten AngularJS-Anweisungen und Anweisungskonfigurationselementen

Detaillierte Erläuterung, wie benutzerdefinierte Anweisungen in AngularJS erstellt werden

Das obige ist der detaillierte Inhalt vonSo richten Sie benutzerdefinierte AngularJs-Direktiven und die Namenskonvention für benutzerdefinierte Direktiven ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!