2016-06-03 6 views
5

Ciao qual è il migliore? Qual è la differenza? Quali sono i pro e i contro?richiedono: ngModel vs scope: {ngModel: '='} su AngularJS Directives

ecco il codice confronto tra i due:

portata: {ngModel: '='}

<!DOCTYPE html> 
<html> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<body> 

<div ng-app="app"> 

<input ng-model="code"></my-directive> 

</div> 
<script type="text/javascript"> 
    app = angular.module('app', []); 

    app.directive('input', function(){ 
    return { 
    scope: { 
    ngModel: '=' 
    }, 
    link: function(scope, element, attrs){ 
    scope.$watch('ngModel', function(value){ 
     console.log(value); 
    }) 
    } 
    } 
    }); 
</script> 
</body> 
</html> 

richiedono: 'ngModel',

<!DOCTYPE html> 
<html> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<body> 

<div ng-app="app"> 

<input ng-model="code"></my-directive> 

</div> 
<script type="text/javascript"> 
    app = angular.module('app', []); 

    app.directive('input', function(){ 
    return { 
    require: 'ngModel', 
    link: function(scope, element, attrs, ngModel){ 
     attrs.$observe('ngModel', function(value){ 
     scope.$watch(value, function(newValue){ 
      console.log(newValue); 
     }); 
     }); 
    } 
    } 
    }); 
</script> 
</body> 
</html> 

PS Si prega di essere consapevoli del fatto che entrambi i codici fa lo stesso. registri sulla console con il valore del modello

+0

Le opinioni non sono di competenza di SO. – Rob

+0

"che è meglio" -> cosa stai cercando di fare? Differenza: 'require' ti dà l'enire' NgModelController' (quindi puoi ad esempio collegarti alle condutture di conversione e convalida di Angular), 'scope =' ti dà un legame con la stessa espressione usata da 'ng-model' (e il suo sottostante 'NgModelController'). –

+0

Quali sono i pro e i contro? –

risposta

7

Con portata: {ngModel: '='},

Si crea una direttiva con ambito isolato, qui in fondo gli ambiti sono isolati e il suo doesn' t eredita dall'oggetto $ genitore, ma i valori sono passati alla direttiva che sono richiesti per questa direttiva. se usi '=' allora il suo legame dati bidirezionale.

bene i vantaggi e gli svantaggi dipendono dal requisito.

Vantaggi:

  • alcuna necessità di utilizzare $scope.$watch ogni volta, al fine di aggiornare la vista nella vostra direttiva se valori delle variabili ambito padre modifiche. '=' fa il lavoro.
  • Se direttiva viene utilizzata con ambito isolato, fungerà da reusable component, può essere utilizzata in più posizioni nell'applicazione.
  • Le variabili di ambito passate a ambiti isolati possono essere utilizzate direttamente nel tuo directive controller anche se la funzione di collegamento non esiste nella direttiva.

svantaggi:

  • come ambiti sono isolati, non andranno intero ambito variabili/funzioni del controller genitore.deve passato attraverso la definizione direttiva solo
  • sopraelevazione grado di utilizzare metodi incorporati angolari per ng-modello o ng-forma per creare api, ngFormController, ngModelController

con richiedono: 'ngModel '

Vantaggi:

  • facile accesso intere parentsController Ambito di applicazione/funzioni quando il suo usato in direttive nidificate
  • buona per creare plug-in come aiuta nella modularità e quanto ha relazione genitore-figlio
  • in grado di utilizzare i metodi angolari incorporati per ng-modello o ng -formare per creare api da loro
  • funziona bene con eventi che emettono e trasmettono (publish-subscribe design pattern).

svantaggio

  • Dovrebbe avere link function in-fine di ottenere il controllo dei genitori e le sue variabili e metodi ambiti.
  • è necessario utilizzare $scope.$watch per aggiornare la vista se le variabili dell'oscilloscopio dei genitori cambiano.
  • quando controller Viene utilizzata la sintassi. è necessario avere metodi incorporati $ scope come $ scope. $ watch e $ scope. $ su $ scope. $ emettere, come sarà disturbo nel regolatore o collegamento di direttive rispetto all'uso di entrambi this e $scope