AngularJSのデータバインディングメカニズム
Mục lục
angleJSのデータバインディングの概念
angleJSのデータバインディングは、文字通り、ビューとコントローラー間のデータバインディングを意味します。つまり、コントローラーレイヤーのデータが変更されると、ビューレイヤーのデータもすぐに変更されます。これをメカニズムの概念として理解しています。
次の例に戻ります。
<!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>入力のデータ、h2タグのデータを更新すると、それに応じてhelloという単語の横のコンテンツが変更されます。
ソースコード分析：
- javascriptレイヤーで、$ scope変数のnameという名前の新しいプロパティを定義し（この変数は、コントローラーレイヤーとビューの間の通信変数であり、後の投稿で説明します）、値に空の文字列を割り当てます。
- h2タグ内のテキストは、hello式とangularJS式{{name}}を組み合わせたものです。ここで、angularJSはこの式を理解して採用し、コントローラーレイヤーの$ scope変数内のname属性を取得して、ユーザーに表示します。
- ng-model属性（AngularJSディレクティブ）を介してhtml構造内に入力します。これは、$scope変数のname属性も表します。
- 入力のデータを更新すると、h1タグのデータも自動的に更新されます。このメカニズムはangularJSのデータバインディングと呼ばれます。
上記の状況での式{{name}}の場合、データが更新されると、HTMLも認識され、リアルタイムで更新されます。これは、一方向データバインディングと呼ばれます。 （プログラミング時に非常に便利です。純粋なJavaScriptを使用する場合は、ユーザーのonkeyupイベントをキャッチし、セレクターをh1タグにクエリし、内部テキストを変更する必要があります=> angleJSは、時間コーディング時間と比較してより多くの改善に役立ち、多くの詳細を削減します純粋なjavascriptまたはjqueryでは実行できないプログラミングの場合）。
双方向データバインディング（双方向バインディング）
最初の例に戻ると、入力を入力すると、それに応じてh1タグのデータが更新されます。つまり、入力内のコンテンツを更新すると、$ scope変数のname属性の値もリアルタイムで変更されます。これは、angularJSの双方向データバインディングメカニズムです。このメカニズムは、テキスト入力、textarea、select、….ディレクティブng-modelなどのほとんどの基本的なHTML入力タグに存在します。
双方向のデータバインディングメカニズムは、ユーザーが入力のコンテンツを更新するときにロジックレイヤー（javascript）またはHTMLレイヤーに変更があった場合に、モデル内のデータをリアルタイムで更新するのに役立ちます。
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
