angularjs双向绑定后，发生了什么事情？是什么可以让view层和Controller层进行绑定的？

1.背景介绍

介绍双向绑定之前，我们先介绍一下单向绑定。

单向数据绑定：指的是我们先把模板写好，然后把模板和数据（数据可能来自后台）整合到一起形成HTML代码，然后把这段HTML代码插入到文档流里面,但是单向绑定有个缺点，就是如果有新的数据来了，那就必须把之前的HTML代码去掉，再重新把新的数据和模板一起整合后插入到文档流中。

双向绑定：数据模型和视图之间的双向绑定。意思就是当用户在视图上的修改会自动同步到数据中去，同样的，如果数据中的值发生了变化，也会立刻同步到视图中去。

双向数据绑定最经常的应用场景就是表单了，这样当用户在前端页面完成输入后，不用任何操作，我们就已经拿到了用户的数据存放到数据模型中了。

2.知识剖析

MVC的基本概念

MVC模式的意思是，软件可以分成三个部分,angularjs也是基于MVC的概念

视图（View）：用户界面；

控制器（Controller）：业务逻辑；

模型（Model）：数据保存。

使用MVC的目的是将M和V的实现代码分离，从而使同一个程序可以使用不同的表现形式。比如一批统计数据可以分别用柱状图、饼图来表示。C存在的目的则是确保M和V的同步，一旦M改变，V应该同步更新。

3.常见问题

1.ANGULARJS双向绑定后，发生了什么事情？

2.怎么让有数据和无数据的情况下，显示的内容不一样？

4.解决方案

当你在使用ng-model时,AngularJS使用$scope.$watch（视图到模型）以及$scope.$apply（模型到视图）来实现这个功能。

angularjs的ng-show和ng-hide都接受一个参数，这个参数是一个表达式，当这个表达式用true的时候执行，这就相当于JS的if和else了，在angular里只需要一行HTML代码就可以执行，非常的简单粗暴。

5.编码实战

<ul><p ng-show="text.length==0">暂无数据</p>
    <li ng-repeat="a in text"><h5>{{a.name}}　　年纪:{{a.age}}　　性别:{{a.Gender}}</h5></li>
</ul>

6.拓展思考

今天我们的标题是什么可以让view层和Controller层进行绑定,可是在刚刚讲的知识剖析里，MVC是model层和view层进行绑定，Controller只是起到一个桥梁的作用。

事实上，这是最传统的MVC结构。在这种结构下，View和Model互相持有，甚至View和Controller以及Controller和Model的关系都是千丝万缕，非常不利于维护。所以，后来的MVC发展出了新的结构。

我们来看看新的关系链:

View向Controller传递交互信息

Controller通知Model改变数据

Model更新数据后通知Controller改变数据

Controller得知数据改变后通知View更新视图

可以看到，演变出来的新MVC去掉了View和Model之间的联系，让View只与Controller交流，而Model也只与Controller交流。而这样的结构也称之为重量级视图控制器结构，除了视图部分和数据部分，其余的都交给Controller

这样可以让View和Model之间的解耦（独立）有利于项目的开发，让负责不同模块的开发人员不用担心自己的改动影响到别人的代码。

可以看到，演变出来的新MVC去掉了View和Model之间的联系，让View只与Controller交流，而Model也只与Controller交流。而这样的结构也称之为重量级视图控制器结构，除了视图部分和数据部分，其余的都交给Controller

这样可以让View和Model之间的解耦（独立）有利于项目的开发，让负责不同模块的开发人员不用担心自己的改动影响到别人的代码

7.参考文献

参考一：贤心博客

参考二：说说视图层架构

8.更多讨论

单向绑定较于双向绑定有什么优点？

单向绑定的优点是相应的可以带来单向数据流，这样做的好处是所有状态变化都可以被记录、跟踪，状态变化通过手动调用通知，源头易追溯，没有“暗箱操作”。同时组件数据只有唯一的入口和出口，使得程序更直观更容易理解，有利于应用的可维护性。