一.什么是双向数据绑定

    首先介绍作用域，相当于一个容器，里面有很多key-value的数据。当AngularJS遇到ng-app指令时就会创建一个名为$rootScope的作用域，它是AngularJS应用的根作用域。

    AngularJS的双向数据绑定：假设页面有一个表单，当用户输入内容发生变化时，AngularJS框架就把表单内容同步到作用域中对应的变量中，而当我们改变作用域中的变量值时，AngularJS又会把修改后的变量值同步到表单中。

二.两个和数据绑定相关的指令：ng-model和ng-bind

    (1) ng-model 双向数据绑定(作用域 <-> 视图)

    在没有AngularJS之前，我们想要监听表单输入可能会这样做：

    
     用户名：
     
    
    
    
     
    
    

    当时有了AngularJS之后，一行JS代码都不需要写，我们就能完成上面同样的工作：

    
     用户名：
     
    
    
    
     {
   {uname}}
    

    这就是 ng-model指令：直接作为属性添加到input标签中，AngularJS会在作用域(全局或者控制器作用域)中添加一个uname的属性，同时和input输入框绑定。

    (2) ng-bind 单向数据绑定(作用域 -> 视图)

    ng-bind用于实现作用域到视图的单向数据绑定，可用于向界面中输出作用域中的数据。和表达式功能类似，但又有一点细微区别。在网络条件不好的时候，AngularJS加载缓慢，浏览器会直接把AngularJS表达式当作字符串渲染到页面中，会造成用户体验不好。使用ng-bind时，如果AngularJS没有加载完毕是不会解析执行的，只有AngularJS加载完毕才会执行。当我们需要作运算或者过滤时，必须使用表达式。

    使用：a.作为属性：ng-bind="uname" ; b.作为class：class="ng-bind:uname"

三.一个简单的Demo理解数据绑定

    
                
    
     用户名：
     
    
    
    
    
    
    
    
    
     简单运算处理：
    
    
    
     乘数：
     
    
    
    
     被乘数：
     
    
    
    
     运算结果：{
   {mult*multee}}
    

    代码和笔记放在码云上：