Ligação de dados AngularJS
A vinculação de dados no AngularJS é a sincronização entre o modelo e a visualização.
Modelo de dados
Os aplicativos AngularJS geralmente têm um modelo de dados. O modelo de dados é uma coleção de dados disponíveis para o aplicativo.
Exemplo
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname
= "John";
$scope.lastname = "Doe";
});
Visualização HTML
O contêiner HTML no qual o aplicativo AngularJS é exibido é chamado de visualização.
A exibição tem acesso ao modelo e há várias maneiras de exibir os dados do modelo na exibição.
Você pode usar a ng-binddiretiva, que vinculará o innerHTML do elemento à propriedade de modelo especificada:
Exemplo
<p ng-bind="firstname"></p>
Você também pode usar chaves duplas para exibir o conteúdo do modelo:{{ }}
Exemplo
<p>First name: {{firstname}}</p>
Ou você pode usar a ng-modeldiretiva em controles HTML para vincular o modelo à exibição.
A ng-modelDiretiva
Use a ng-modeldiretiva para vincular dados do modelo à exibição em controles HTML (entrada, seleção, área de texto)
Exemplo
<input ng-model="firstname">
A ng-modeldiretiva fornece uma ligação bidirecional entre o modelo e a exibição.
Encadernação de duas vias
A vinculação de dados no AngularJS é a sincronização entre o modelo e a visualização.
Quando os dados no modelo são alterados, a exibição reflete a alteração e, quando os dados na exibição são alterados, o modelo também é atualizado. Isso acontece de forma imediata e automática, o que garante que o modelo e a visualização sejam atualizados o tempo todo.
Exemplo
<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
= "John";
$scope.lastname = "Doe";
});
</script>
Controlador AngularJS
Os aplicativos em AngularJS são controlados por controladores. Leia sobre controladores no capítulo Controladores AngularJS .
Devido à sincronização imediata do modelo e da visualização, o controlador pode ser completamente separado da visualização e simplesmente se concentrar nos dados do modelo. Graças à vinculação de dados no AngularJS, a visualização refletirá quaisquer alterações feitas no controlador.
Exemplo
<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
= "John";
$scope.changeName
= function() {
$scope.firstname
= "Nelly";
}
});
</script>