Dystrybucja danych AngularJS

Wiązanie danych w AngularJS to synchronizacja między modelem a widokiem.

Model danych

Aplikacje AngularJS zazwyczaj mają model danych. Model danych to zbiór danych dostępnych dla aplikacji.

Przykład

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

HTML widok

HTML kontener aplikacji AngularJS nazywa się widok.

Widok może uzyskać dostęp do modelu i istnieją różne sposoby wyświetlania danych modelu w widoku.

Możesz użyć ng-bind instrukcji, która wiąże innerHTML elementu z określonym atrybutem modelu:

Przykład

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

Spróbuj sam

Możesz również użyć podwójnych klamr {{ }} aby wyświetlić zawartość modelu:

Przykład

<p>First name: {{firstname}}</p>

Spróbuj sam

Lub możesz użyć na HTML kontrolerze ng-model Instrukcja wiąże model z widokiem.

instrukcji ng-model

Używaj ng-model Instrukcja wiąże dane w modelu z widokiem HTML kontrolera (input, select, textarea).

Przykład

<input ng-model="firstname">

Spróbuj sam

ng-model Instrukcje zapewniają dwukierunkowe wiązanie między modelem a widokiem.

Dwukierunkowe wiązanie

Wiązanie danych w AngularJS to synchronizacja między modelem a widokiem.

Kiedy dane w modelu się zmieniają, widok odzwierciedla te zmiany, a kiedy dane w widoku się zmieniają, model również się aktualizuje. To dzieje się natychmiast i automatycznie, zapewniając, że model i widok są zawsze aktualizowane.

Przykład

<div ng-app="myApp" ng-controller="myCtrl">
  Name: <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>

Spróbuj sam

Kontrolery AngularJS

Aplikacje w AngularJS są kontrolowane przez kontrolery. Przeczytaj o kontrolerach w rozdziale o kontrolerach w AngularJS.

Dzięki natychmiastowej synchronizacji modelu i widoku, kontroler może być całkowicie oddzielony od widoku, koncentrując się tylko na danych modelu. Dzięki wiązaniu danych w AngularJS, widok odzwierciedla jakiekolwiek zmiany dokonywane w kontrolerze.

Przykład

<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>

Spróbuj sam