AngularJS prend en charge les propriétés de balises définies par l'utilisateur et ajoute du contenu personnalisé sans utiliser les opérations de nœud DOM.
Les quatre principales caractéristiques d'AngularJ sont mentionnées plus tôt:
1 MVC
2 modulaire
3 instructions
4 liaison de données bidirectionnelle
Ce qui suit sera introduit:
1 Comment personnaliser la commande
2 Utilisation des instructions personnalisées
3 Utilisation en ligne des directives personnalisées
Comment personnaliser les directives:
Angular est un framework basé sur des modules, vous devez donc créer votre propre module:
var myAppModule = angular.module ("myApp", []);
Puis créez une directive sur ce module
myAppModule.Directive ("xingoo", function () {return {restrict: 'aecm', modèle: '<div> Bonjour ma directive </div>', remplacement: true}});Parmi eux, Xingoo est le nom de notre balise personnalisée, suivi de sa fonction de méthode.
La fonction renvoie une combinaison de paires de valeurs clés, qui définit les méthodes d'utilisation, les propriétés, etc. de la balise.
Voyons ce qu'il définit:
1 restreint: définit les méthodes d'utilisation des étiquettes, avec un total de quatre types, à savoir AECM
2 Modèle: Définissez le modèle de la balise. À l'intérieur se trouve une chaîne utilisée pour remplacer les balises personnalisées
3 Remplacement: s'il faut prendre en charge le remplacement
4 Transclude: s'il faut prendre en charge
Comment utiliser la commande:
Les quatre façons d'utiliser des étiquettes ci-dessus, à savoir AECM.
Un attribut: utilisé comme attribut
<div xingoo> </div>
Élément E: utilisé comme élément d'étiquette
<xingoo> </ xingoo>
Classe C: utilisé comme style CSS
<div> </div>
M Commentaires Commentaires: utilisé comme commentaires (cette méthode n'est pas disponible dans la version 1.2!)
<! - Directive: Xingoo ->
<div> </div>
D'une manière générale, il est recommandé de l'utiliser comme attributs et éléments.
Lorsque vous souhaitez étendre les attributs sur les balises HTML existantes, utilisez la méthode d'attribut.
Lorsque vous souhaitez personnaliser la balise, prenez la forme d'une balise.
Pour utiliser cette méthode, vous devez déclarer la lettre correspondante dans la restriction de la directive de définition.
Utilisation en ligne des directives:
Parce que d'autres balises peuvent être imbriquées à l'intérieur de la balise, si vous souhaitez nicher d'autres balises d'élément dans une balise personnalisée, vous avez besoin:
1 Utilisez la propriété Transclude, définie sur true.
2 et utilisez la propriété NG-Transclude pour définir l'emplacement imbriqué interne.
Le code est le suivant:
myAppModule.Directive ("test", function () {return {restrict: 'aecm', tradlate: true, template: "<div> haha! <div ng-transclude> </div> wuwu! </div>"}});Tous les codes
<! doctype html> <html ng-app = "myApp"> <éadf> <méta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> <script src = "http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"> </ script> </ head> <body> <xingoo> </ xingoo> <v xingoo> </v> <v> </v> <! <xingoo> 3333 </ xingoo> <hr> <test> 4444 </ test> <script type = "text / javascript"> var myappmodule = angular.module ("myApp", []); myAppModule.Directive ("xingoo", function () {return {restrict: 'aecm', modèle: '<div> Bonjour ma directive </div>', remplacement: true}}); myAppModule.Directive ("test", function () {return {restrict: 'aecm', transclude: true, modèle: "<div> haha! <div ng-transclude> </ div> wuwu! </div>"}}); </cript> </ body> </html>Résultats en cours d'exécution
Ce qui précède est l'information triant les directives personnalisées AngularJS. Nous continuerons d'ajouter des informations pertinentes à l'avenir. Merci pour votre soutien à ce site!