Dettagli dell'interazione delle direttive di AngularJS e codice di esempio

　　Introduzione di sfondo

　　Questo esempio è un esempio nel video, c'è un superuomo dinamico con tre capacità, forza strength, velocità speed, emettimento di luce light.

　　Queste tre capacità come tre attributi, definisci il superuomo dinamico come un'etichetta, è sufficiente aggiungere l'attributo corrispondente per ottenere questa capacità.

　　Per facilitare la presentazione dei risultati, aggiungi un evento di risposta del mouse all'etichetta, quando il mouse si muove sull'etichetta corrispondente viene attivato un metodo che stampa le capacità possedute.

　　Analisi del programma
　　Il codice HTML è il seguente:　　　　　　　

 <div>
      <superman>nessuno!</superman>
      <superman forza>forza!</superman>
      <superman forza velocità>forza velocità!</superman>
      <superman forza velocità luce>forza velocità luce!</superman>
    </div>

　　Vediamo come implementarlo, prima di tutto crea un modulo:

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

　　Sulla base di questo modulo, crea l'etichetta superman, simile a prima.

myAppModule.directive("superman", function() {
        return{
          scope: {},
          restrict: 'AE',
          transclude: true,
          template: "<div><div ng-transclude></div></div>",
          controller: function($scope) {
            $scope.abilities = [];
            this.addStrength = function() {
              $scope.abilities.push("forza");
            };
            this.addSpeed = function() {
              $scope.abilities.push("velocità");
            };
            this.addLight = function() {
              $scope.abilities.push("light");
            };
          },
          link:function(scope,element,attr){
            element.bind("mouseenter",function(){
              console.log(scope.abilities);
            });
          }
        }
      });

　　Ecco la differenza, all'interno del metodo c'è un attributo controller, questo non è un controller come ng-controller, ma un'interfaccia aperta dall'instruzione, i metodi dichiarati all'interno possono essere utilizzati come metodi pubblici dall'esterno, altre istruzioni possono utilizzare questi metodi tramite dipendenze.

　　Quindi crea tre comandi corrispondenti alle tre capacità.

    myAppModule.directive("strength",function(){
        return{
          require:'^superman',
          link:function(scope,element,attr,supermanCtrl){
            supermanCtrl.addStrength();
          }
        }
      });
      myAppModule.directive("speed",function(){
        return{
          require:'^superman',
          link:function(scope,element,attr,supermanCtrl){
            supermanCtrl.addSpeed();
          }
        }
      });
      myAppModule.directive("light",function(){
        return{
          require:'^superman',
          link:function(scope,element,attr,supermanCtrl){
            supermanCtrl.addLight();
          }
        }
      });

　　Il codice dei tre comandi è molto simile, tra cui il require specifica le dipendenze dei comandi.

　　Nel link è stato aggiunto un parametro supermanCtrl, questo parametro è ipotizzato essere il controller di superman, quindi il nome è stato scelto nel modo superman+Ctrl.

　　【Poiché non conosco i principi interni, questo è solo un'ipotesi, ma l'esperimento ha dimostrato che se si cambia il nome di questo parametro, verrà generato un errore。】

　　Ecco dichiarati questi tre comandi, possono essere utilizzati come attributi di super, quando si specifica l'attributo, viene attivato il metodo interno del link, chiamando i metodi pubblici di superman.　　

　　In sintesi, il processo di interazione dei comandi:

　　1 Creare un comando di base, aggiungere i metodi pubblici dopo l'attributo controller.

　　2 Creare altri comandi interattivi, aggiungere le dipendenze dei comandi corrispondenti dopo l'attributo require; chiamare i metodi pubblici in link

　　Tutto il codice del programma:

<!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>
    <div>
      <superman>nessuno!</superman>
      <superman forza>forza!</superman>
      <superman forza velocità>forza velocità!</superman>
      <superman forza velocità luce>forza velocità luce!</superman>
    </div>
    <script type="text/javascript">
      var myAppModule = angular.module("myApp", []);
      myAppModule.directive("superman", function() {
        return{
          scope: {},
          restrict: 'AE',
          transclude: true,
          template: "<div><div ng-transclude></div></div>",
          controller: function($scope) {
            $scope.abilities = [];
            this.addStrength = function() {
              $scope.abilities.push("forza");
            };
            this.addSpeed = function() {
              $scope.abilities.push("velocità");
            };
            this.addLight = function() {
              $scope.abilities.push("light");
            };
          },
          link:function(scope,element,attr){
            element.bind("mouseenter",function(){
              console.log(scope.abilities);
            });
          }
        }
      });
      myAppModule.directive("strength",function(){
        return{
          require:'^superman',
          link:function(scope,element,attr,supermanCtrl){
            supermanCtrl.addStrength();
          }
        }
      });
      myAppModule.directive("speed",function(){
        return{
          require:'^superman',
          link:function(scope,element,attr,supermanCtrl){
            supermanCtrl.addSpeed();
          }
        }
      });
      myAppModule.directive("light",function(){
        return{
          require:'^superman',
          link:function(scope,element,attr,supermanCtrl){
            supermanCtrl.addLight();
          }
        }
      });
    </script>
  </body>
</html>

　Risultato dell'esecuzione:

　　　　　　　 Ecco la raccolta di materiali relativi all'interazione delle direttive AngularJS, continueremo a integrare ulteriori materiali, grazie per il supporto della nostra community!

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, di proprietà del rispettivo autore, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, il sito web non detiene i diritti di proprietà, non è stato editato manualmente e non assume responsabilità legali correlate. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una email a: notice#oldtoolbag.com (al momento dell'invio della email, sostituisci # con @) per segnalare, fornendo prove pertinenti. Una volta verificata, il sito web rimuoverà immediatamente il contenuto sospetto di violazione del copyright.

Corso di base