既然AngularJS是以數(shù)據(jù)作為驅(qū)動(dòng)的MVC框架，在上一篇文章中，也介紹了AngularJS如何實(shí)現(xiàn)MVC模式的，所有模型里面的數(shù)據(jù)，都必須經(jīng)過(guò)控制器，才能展示到視圖中。

什么是數(shù)據(jù)綁定

首先來(lái)回憶一下MVC模式在AngularJS中的體現(xiàn)，我將會(huì)拿下面這張圖片來(lái)說(shuō)明。

數(shù)據(jù)綁定.PNG

一個(gè)模型中可能有多個(gè)數(shù)據(jù)，通過(guò)控制器，展示到視圖的過(guò)程中，控制器要知道每一個(gè)數(shù)據(jù)，具體要放到視圖中的哪個(gè)位置，所以，模型數(shù)據(jù)與視圖位置的關(guān)聯(lián)關(guān)系就是數(shù)據(jù)綁定。

單向綁定

AngularJS中的單向綁定指的是從模型數(shù)據(jù)到視圖模板的單向過(guò)程。
具體實(shí)現(xiàn)是使用指令ng-bind還有{{}}。
而其中這兩個(gè)方法的區(qū)別是使用{{}}會(huì)出現(xiàn)閃爍現(xiàn)象，因?yàn)榧虞d順序的問(wèn)題，瀏覽器剛開(kāi)始加載不認(rèn)識(shí){{}}里面的數(shù)據(jù)，等過(guò)了一會(huì)，控制器加載出來(lái)之后，才識(shí)別到那個(gè)數(shù)據(jù)，所以會(huì)出現(xiàn)閃爍現(xiàn)象，解決閃爍現(xiàn)象的方法是使用指令ng-cloak。

<ul ng-controller="DemoController">
         <!--ng-bind將模型上的數(shù)據(jù)綁定到視圖上-->
         <li ng-bind="name"></li>
</ul>
<script src="node_modules/angular/angular.min.js"></script>
     <script>
         var App = angular.module('App',[]);
         App.controller('DemoController',['$scope',function($scope){
             $scope.name = 'itcast';
         }]);
    </script>

雙向綁定

AngularJS其中一個(gè)重要的特性就是雙向數(shù)據(jù)綁定，實(shí)現(xiàn)的方法是通過(guò)為表單元素使用ng-model指令將試圖模板上的值綁定到模型數(shù)據(jù)上，結(jié)合之前的單向綁定方法，實(shí)現(xiàn)數(shù)據(jù)的雙向綁定，具體看一下例子

<ul ng-controller="DemoController">
         <input type="text" ng-model="name"/>
         <p>{{name}}</p>
</ul>
<script src="node_modules/angular/angular.min.js"></script>
     <script>
         var App = angular.module('App',[]);
         App.controller('DemoController',['$scope',function($scope){
             $scope.name = 'itcast';
         }]);
     </script>

此時(shí)打開(kāi)瀏覽器，你在輸入框中的任何變化，都會(huì)表現(xiàn)在<p>標(biāo)簽里面，這就是因?yàn)?code>ng-model將輸入框中的值綁定到了模型數(shù)據(jù)里的name屬性上，實(shí)現(xiàn)了雙向數(shù)據(jù) 綁定。