Meccanismo di data binding in AngularJS
Mục lục
Concetto di data binding in angularJS
Data Binding in angularJS significa letteralmente associazione dei dati tra la vista e il controller, il che significa che quando i dati al livello del controller vengono modificati, anche i dati del livello della vista vengono modificati immediatamente. Lo comprendiamo come un concetto di meccanismo.
Torna al seguente esempio:
<!DOCTYPE html> <html lang="en" ng-app="exampleviewApp"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example View AngularJS</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> </head> <body ng-controller="mainController"> <h2>Hello {{name}}</h2> <input type="text" ng-model="name" /> </body> <script> var exampleviewApp = angular.module('exampleviewApp', []); exampleviewApp.controller('mainController', function($scope) { $scope.name = ''; }); </script> </html>Quando si aggiornano i dati nell'input, i dati nel tag h2, il contenuto accanto alla parola ciao verranno modificati di conseguenza.
Analisi del codice sorgente:
- Nel livello javascript, definisci una nuova proprietà denominata nome per la variabile $scope (questa variabile è la variabile di comunicazione tra il livello del controller e le viste, che sarà discussa in un post successivo) e assegna il valore con una stringa vuota.
- Il testo all'interno del tag h2 combina hello e angularJS expression {{name}} , qui angularJS comprende e adotta questa espressione per ottenere l'attributo name all'interno della variabile $scope sul livello del controller e mostrarlo all'utente.
- Input all'interno della struttura html tramite l'attributo ng-model (direttive AngularJS), che rappresenta anche l'attributo name della variabile $scope
- Quando si aggiornano i dati nell'input, anche i dati sul tag h1 vengono aggiornati automaticamente, questo meccanismo è chiamato data-binding di angularJS.
Nel caso dell'espressione {{name}} nella situazione precedente, quando i dati vengono aggiornati, anche l'html viene riconosciuto e aggiornato in tempo reale, chiamato data binding unidirezionale. (È molto comodo durante la programmazione, se si utilizza javascript puro, dovremo catturare l'evento onkeyup dell'utente, selezionare il selettore di query sul tag h1, modificare il testo interno => angularJS aiuta a migliorare di più se confrontato nel tempo di codifica, riducendo molti dettagli durante la programmazione che javascript o jquery puro non possono fare).
Associazione dati a due vie (associazione a due vie)
Tornando al primo esempio, quando inseriamo l'input, i dati nel tag h1 vengono aggiornati di conseguenza. Ciò significa che, quando aggiorniamo il contenuto all'interno dell'input, anche il valore dell'attributo name nella variabile $scope viene modificato in tempo reale, questo è il meccanismo di data binding a due vie di angularJS. Questo meccanismo esiste nella maggior parte dei tag di input HTML di base, come input di testo, textarea, select, …. tramite le direttive ng-model
Il meccanismo di data binding a due vie aiuta i dati all'interno del modello ad essere aggiornati in tempo reale quando si verifica una modifica nel livello logico (javascript) o nel livello HTML quando l'utente aggiorna il contenuto nell'input.
