Comment configurer les directives personnalisées AngularJs et la convention de dénomination des directives personnalisées

AngularJS nous offre la fonction d'instructions personnalisées. Grâce à cette fonction, nous pouvons personnaliser certaines balises pour aider notre propre développement. Dans le contenu suivant, je partagerai avec vous comment définir des instructions personnalisées dans AngularJs via des directives et des restrictions.

1. Description de l'attribut restrict de la directive personnalisée AngularJs :

Partie HTML courante :

<h1 zym-blog></h1>

Partie JavaScript :

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

Définissez une instruction personnalisée via une directive. Le premier paramètre est le nom de l'instruction et le deuxième paramètre est un tableau, comprenant une fonction de rappel. La valeur de retour de la fonction est un objet json, où. :

restrict représente la forme de l'instruction : A est un attribut, E est un élément et C est une classe Afin d'éviter toute confusion avec la classe dans le style, C n'est pas recommandé.

template est le contenu du modèle, indiquant le contenu à insérer dans la balise à l'aide de cet attribut personnalisé.

La valeur de replace est par défaut false. Si elle est vraie, cela signifie que la balise dans le code html utilisant cette instruction personnalisée doit être remplacée par la balise dans le modèle. Notez que si vous utilisez replace, le modèle doit contenir des éléments HTML, pas seulement quelques mots, sinon Angular signalera une erreur.

Regardons un autre attribut. templateUrl et template ne peuvent pas apparaître en même temps. templateUrl est l'adresse du modèle référencé :

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

Notez que, comme le remplacement est utilisé ici, le contenu du modèle correspondant. vers templateUrl Doit contenir un élément de balise HTML.

2. Convention de dénomination standard pour les directives personnalisées :

Les noms de directives de directive utilisent une dénomination en casse chameau, telle que [zymBlog], puis lorsqu'ils sont appelés dans du code HTML, vous avez besoin pour ajouter un tiret avant les majuscules, comme [zym-blog].

3. Opération fonctionnelle du modèle d'instruction personnalisé :

le modèle peut non seulement être une chaîne, mais aussi une fonction, par exemple :

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

4. Attribut de transclusion d'instruction personnalisée :

Il existe une situation où une instruction personnalisée est utilisée en HTML, mais il y a du contenu à l'intérieur de la balise. Dans ce cas, l'instruction personnalisée est le contenu. inside remplacera le contenu original de la balise, vous devez donc ajouter un attribut pour résoudre ce problème (ng-transclude) :

partie html :

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

partie js :

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

Après avoir défini la valeur de ng-transclude sur true, vous devez ajouter une autre balise à l'intérieur de l'instruction personnalisée et spécifier ng-transclude, afin que le contenu de la balise html d'origine soit placé dans cette balise à l'intérieur !

Recommandations associées :

Compétences de mise en œuvre des instructions personnalisées AngularJS et des éléments de configuration des instructions

Explication détaillée de la façon de créer des instructions personnalisées dans AngularJS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!