AngularJS研究笔记(3)数据双向绑定的一个简单例子

双向绑定

双向绑定是AngularJS最实用的功能，节省了大量代码，让我们专注于数据和视图，不会在Dom监控和数据同步上浪费大量代码。有关双向更新，请参见下图：

数据视图

这里我们只演示如何在获得数据后绑定到视图。

！DOCTYPE html html ng-App=' App ' head script type=' text/JavaScript ' src=' http :http://sandbox . runjs.cn/uploads/RS/394/xjz9g 1bv/angular . js '/script script type=' text/JavaScript ' var App=angular . module(' App '，[])；App.controller ('ctrl '，function($ scope){ $ scope . username='张三' $ scope . change name=function(){ $ scope . username='李四'；} });/script/head body div ng-controller=' ctrl ' button class=' BTN BTN-primary ' ng-click=' change name()；用户名='李四'/按钮！-在页面加载的初始阶段，用户可能会看到绑定表达式-div {{username}}/div！-本次绑定不会出现上述情况-div ng-bind=' username '/div/div/body/html点击按钮后，div内容变为李四，效果如图：

视图-数据

在最后一个例子中，在我们看到数据改变之后，视图将自动改变。另一方面，在本例中，视图发生了变化，从而导致了数据的变化。数据改变后我们怎么知道？在这里，我们可以通过另一个元素再次显示数据。

！DOCTYPE html html ng-App=' App ' head script type=' text/JavaScript ' src=' http :http://sandbox . runjs.cn/uploads/RS/394/xjz9g 1bv/angular . js '/script script type=' text/JavaScript ' var App=angular . module(' App '，[])；App.controller ('ctrl '，function($ scope){ $ scope . username='张三' })；/script/head body div ng-controller=' ctrl '输入类型=' text ' ng-model=' username '/div { { username } }/div/div/body/html查看效果：

实施机制

Angular封装了常见的dom事件、xhr事件等。并触发进入角消化的过程。

在摘要过程中，它将从rootscope遍历并检查所有观察器。