Mecanismo de vinculação de dados em AngularJS
Mục lục
Conceito de vinculação de dados em angularJS
Data Binding em angularJS significa literalmente vinculação de dados entre a visualização e o controlador, o que significa que quando os dados na camada do controlador são alterados, os dados da camada de visualização também são alterados imediatamente. Entendemos isso como um conceito de mecanismo.
Retorne ao exemplo a seguir:
<!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>Ao atualizar os dados na entrada, os dados na tag h2, o conteúdo ao lado da palavra hello será alterado de acordo.
Análise do código-fonte:
- Na camada javascript, defina uma nova propriedade chamada name para a variável $scope (esta variável é a variável de comunicação entre a camada controller e as views, que será discutida em um post posterior) e atribua o valor com uma string vazia.
- O texto dentro da tag h2 combina a expressão hello e angularJS {{name}} , aqui o angularJS entende e adota esta expressão para obter o atributo name dentro da variável $scope na camada do controlador e exibi-lo ao usuário.
- Entrada dentro da estrutura html via atributo ng-model (diretivas AngularJS), que também representa o atributo name da variável $scope
- Ao atualizar os dados na entrada, os dados na tag h1 também são atualizados automaticamente, esse mecanismo é chamado de data-binding do angularJS.
Para o caso da expressão {{name}} na situação acima, quando os dados são atualizados, o html também é reconhecido e atualizado em tempo real, chamado de one way data binding. (É muito conveniente na hora de programar, se usar javascript puro, precisaremos pegar o evento onkeyup do usuário, seletor de consulta para a tag h1, alterar o texto interno => angularJS ajuda a melhorar mais se comparado no tempo de codificação, reduzindo muitos detalhes ao programar que javascript puro ou jquery não pode fazer).
Ligação de dados bidirecional (vinculação bidirecional)
Voltando ao primeiro exemplo, quando inserimos a entrada, os dados na tag h1 são atualizados de acordo. Isso significa que, quando atualizamos o conteúdo dentro da entrada, o valor do atributo name na variável $scope também é alterado em tempo real, este é o mecanismo de vinculação de dados bidirecional do angularJS. Este mecanismo existe na maioria das tags de entrada HTML básicas, como entrada de texto, textarea , select, …. via diretivas ng-model
O mecanismo de vinculação de dados bidirecional ajuda os dados dentro do modelo a serem atualizados em tempo real quando há uma mudança na camada lógica (javascript) ou na camada HTML quando o usuário atualiza o conteúdo na entrada.
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
