AngularJS 双向数据绑定

示例

Angular具有一些不可思议的作用。它允许将DOM绑定到实际的js变量。

Angular使用一个名为“摘要循环”的循环,该循环在变量发生任何更改后即被调用-调用用于更新DOM的回调。

例如,ng-model伪指令将keyupeventListener附加到此输入:

<input ng-model="variable" />

每次keyup事件触发时,摘要循环就会启动。

在某个时候,摘要循环遍历一个回调,该回调将更新此范围的内容:

<span>{{variable}}</span>

此示例的基本生命周期(非常示意性地)总结了angular如何工作:

  1. 角度扫描html

    • ng-model指令keyup在输入上创建一个侦听器

    • expression内部范围内添加了摘要循环的回调

  2. 用户与输入进行交互

    • keyup侦听器开始摘要循环

    • 摘要循环调用回调

    • 回调更新跨度的内容