Spiegazione dettagliata e codice di esempio di direttive personalizzate AngularJS

AngularJS supporta gli attributi di etichetta personalizzati dell'utente, aggiungendo contenuti personalizzati senza dover utilizzare le operazioni sui nodi DOM.

Come menzionato in precedenza, ci sono quattro caratteristiche principali di AngularJS:

　　1 MVC

　　2 Modularizzazione

　　3 Istruzione

　　4 Bindaggio dei dati bidirezionale

Di seguito verranno illustrati i seguenti contenuti:

　　1 Come creare un'instruzione personalizzata

　　2 Uso dell'instruzione personalizzata

　　3 Uso interno dell'instruzione personalizzata

　　Come creare un'instruzione personalizzata:

　　Angular è una struttura basata su modulo, quindi è necessario creare il proprio modulo all'inizio:

var myAppModule = angular.module("myApp",[]);

　　Poi crea l'instruzione directive su questa base modulo　　　　　　

 myAppModule.directive("xingoo",function(){
    return{
     restrict:'AECM',
     template:'<div>hello my directive</div>',
     repalce:true
    }
   });

　　Dove xingoo è il nome del nostro tag personalizzato, seguito dalla sua funzione di metodo.

　　La funzione return ha restituito una combinazione di coppia di chiavi, nella quale sono definiti i metodi di utilizzo dei tag, le proprietà ecc.

　　Quindi vediamo cosa ha definito:

　　1 restrict: definisce il metodo di utilizzo del tag, ci sono in totale quattro, ovvero AECM

　　2 template: definisce il modello del tag. È una stringa utilizzata per sostituire il tag personalizzato

　　3 repalce: supporta il sostituto?

　　4 transclude: supporta l'annidamento?

　　Come utilizzare l'instruzione:

　　Come menzionato precedentemente, ci sono quattro modi di utilizzo dei tag, ovvero AECM.

　　A attributo attributo: utilizzato come attributo

　　E elemento di elemento: utilizzato come elemento di etichetta

　　C classe di classe: utilizzata come stile CSS

　　M commenti di commento: utilizzati come commenti (Questo metodo non è disponibile nella versione 1.2, testato personalmente!)

<div></div>

　　Di solito si raccomanda di utilizzare come proprietà e elementi.

　　Quando si desidera estendere le proprietà di un tag HTML esistente, utilizzare il metodo delle proprietà.

　　Quando si desidera creare un tag personalizzato, utilizzare il formato del tag.

　　Per utilizzare un metodo specifico, è necessario dichiarare la lettera corrispondente nel campo restrict dell'instruzione definita.　

　　Uso interno dell'instruzione:

　　Poiché i tag possono essere annidati all'interno di altri tag, per annidare altri tag elementari all'interno di un tag personalizzato, è necessario:

　　1 Utilizzare l'attributo transclude impostato su true.

　　2 Utilizzare l'attributo ng-transclude per definire la posizione interna annidata.

　　Il codice è il seguente:　　　　　　

  myAppModule.directive("test",function(){
    return{
     restrict:'AECM',
     transclude:true,
     template:"<div>haha! <div ng-transclude></div> wuwu!</div>"
    }
   });

　　Tutto il codice

<!doctype html>
<html ng-app="myApp">
 <head>
   <meta http-equiv="Content-Type" content="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>
  <div xingoo></div>
  <div class="xingoo"></div>
  <!-- directive:xingoo -->
  <div></div>
  <hr>
  <xingoo>3333</xingoo>
  <hr>
  <test>4444</test>
  <script type="text/javascript">
   var myAppModule = angular.module("myApp",[]);
   myAppModule.directive("xingoo",function(){
    return{
     restrict:'AECM',
     template:'<div>hello my directive</div>',
     repalce:true
    }
   });
   myAppModule.directive("test",function(){
    return{
     restrict:'AECM',
     transclude:true,
     template:"<div>haha! <div ng-transclude></div> wuwu!</div>"
    }
   });
  </script>
 </body>
</html>

　　Running result

This is the material sorting of AngularJS custom directives, and we will continue to supplement relevant materials, thank you all for your support to this site!

Declaration: The content of this article is from the Internet, the copyright belongs to the original author, the content is contributed and uploaded by Internet users spontaneously, this website does not own the copyright, it has not been manually edited, nor does it assume relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (when sending an email, please replace # with @) to report, and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.

Manuale di base