Δέσμευση Δεδομένων AngularJS

Η δεσμεύση δεδομένων στο AngularJS είναι η συγχρονισμός μεταξύ μοντέλου και προβολής.

Μοντέλο δεδομένων

Η εφαρμογή AngularJS συνήθως έχει ένα μοντέλο δεδομένων. Το μοντέλο δεδομένων είναι η συλλογή δεδομένων που είναι διαθέσιμα για την εφαρμογή.

Παράδειγμα

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstname = "Bill";
  $scope.lastname = "Gates";
});

Προβολή HTML

Ο HTML κοντέινερ της εφαρμογής AngularJS ονομάζεται προβολή.

Η προβολή μπορεί να προσπελάσει το μοντέλο και υπάρχουν διάφοροι τρόποι για να εμφανιστούν τα δεδομένα του μοντέλου στη προβολή.

Μπορείτε να χρησιμοποιήσετε ng-bind οδηγία, η οποία δεσμεύει το innerHTML του στοιχείου στο καθορισμένο μοντέλο:

Παράδειγμα

<p ng-bind="firstname"></p>

Δοκιμάστε το Εκφραστικά

Μπορείτε επίσης να χρησιμοποιήσετε {{ }} για να εμφανίσετε το περιεχόμενο του μοντέλου:

Παράδειγμα

<p>Όνομα: {{firstname}}</p>

Δοκιμάστε το Εκφραστικά

ή μπορείτε να χρησιμοποιήσετε ng-model Η οδηγία δεσμεύει το μοντέλο στη προβολή.

οδηγία ng-model

Χρησιμοποιώντας ng-model Οι οδηγίες δεσμεύουν τα δεδομένα του μοντέλου στην προβολή των HTML ελέγχων (input, select, textarea).

Παράδειγμα

<input ng-model="firstname">

Δοκιμάστε το Εκφραστικά

ng-model Οι οδηγίες παρέχουν μια διπλούς κατευθυντήριους δεσμούς μεταξύ μοντέλου και προβολής.

Δ雙向绑定

Η δεσμεύση δεδομένων στο AngularJS είναι η συγχρονισμός μεταξύ μοντέλου και προβολής.

Όταν τα δεδομένα του μοντέλου αλλάζουν, η προβολή αντικατοπτρίζει αυτή την αλλαγή και όταν τα δεδομένα της προβολής αλλάζουν, το μοντέλο ενημερώνεται. Αυτό συμβαίνει αμέσως και αυτόματα, διασφαλίζοντας ότι το μοντέλο και η προβολή είναι πάντα ενημερωμένα.

Παράδειγμα

<div ng-app="myApp" ng-controller="myCtrl">
  Όνομα: <input ng-model="firstname">
  <h1>{{firstname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstname = "Bill";
  $scope.lastname = "Gates";
});
</script>

Δοκιμάστε το Εκφραστικά

Ελεγκτές AngularJS

Η εφαρμογή AngularJS ελέγχεται από τον ελεγκτή. Ανατρέξτε στο κεφάλαιο του ελεγκτή του AngularJS για περισσότερες πληροφορίες.

Ο συνδυασμός μοντέλου και προβολής σε πραγματικό χρόνο επιτρέπει στο ελεγκτή να είναι πλήρως αποσπασμένος από την προβολή και να επικεντρώνεται μόνο στα δεδομένα του μοντέλου. Επειδή η AngularJS υποστηρίζει δεδομένα δεσμεύσεων, η προβολή θα αντικατοπτρίζει οποιαδήποτε αλλαγή που γίνεται στο ελεγκτή.

Παράδειγμα

<div ng-app="myApp" ng-controller="myCtrl">
  <h1 ng-click="changeName()">{{firstname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstname = "Bill";
  $scope.changeName = function() {
    $scope.firstname = "Nelly";
  }
});
</script>

Δοκιμάστε το Εκφραστικά