AngularJS学习之数据绑定

既然AngularJS是以数据作为驱动的MVC框架，在上一篇文章中，也介绍了AngularJS如何实现MVC模式的，所有模型里面的数据，都必须经过控制器，才能展示到视图中。

什么是数据绑定

首先来回忆一下MVC模式在AngularJS中的体现，我将会拿下面这张图片来说明。

一个模型中可能有多个数据，通过控制器，展示到视图的过程中，控制器要知道每一个数据，具体要放到视图中的哪个位置，所以，模型数据与视图位置的关联关系就是数据绑定。

单向绑定

AngularJS中的单向绑定指的是从模型数据到视图模板的单向过程。

具体实现是使用指令ng-bind还有{{}}。

而其中这两个方法的区别是使用{{}}会出现闪烁现象，因为加载顺序的问题，浏览器刚开始加载不认识{{}}里面的数据，等过了一会，控制器加载出来之后，才识别到那个数据，所以会出现闪烁现象，解决闪烁现象的方法是使用指令ng-cloak。

<ul ng-controller="DemoController">
         <!--ng-bind将模型上的数据绑定到视图上-->
         <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其中一个重要的特性就是双向数据绑定，实现的方法是通过为表单元素使用ng-model指令将试图模板上的值绑定到模型数据上，结合之前的单向绑定方法，实现数据的双向绑定，具体看一下例子

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

此时打开浏览器，你在输入框中的任何变化，都会表现在

标签里面，这就是因为ng-model将输入框中的值绑定到了模型数据里的name属性上，实现了双向数据 绑定。