# 数据绑定

* 数据绑定可自动将model和view间的数据同步。
* Angular实现数据绑定的方式，可以让我们把model当作程序中唯一可信的数据来源。view始终是model的投影。当model发生变化时，会自动反映到view上。
* Angular的 ng 的一大特点，就是数据双向绑定。

## 经典模板系统中的数据绑定

![](/files/-LfnTGAUl-7Wsd9N63vP)

* 大多数模板系统中的数据绑定都是单向的
* 把模板与model合并在一起变成view，如果在合并之后，model发生了变化，不会自动反映到view上。
* 用户在view上的交互也不会反映到model中，开发者必须写大量代码不断地在view与model之间同步数据。

## Anguarjs 模板中的数据绑定

![](/files/-LfnTGAWJJl4GS19d55s)

* 模板是在浏览器中编译的，在编译阶段产生了一个实时更新(live)的视图
* 不论在model或是view上发生了变化，都会立刻反映到对方。
* model成为程序中唯一真实的数据来源，极⼤大地简化了开发者需要处理的编程模型。\*

**数据双向绑定例子：**

```markup
<body ng-app>

    <!--
        view => 12131
        model => 12131
        3个 view
        数据是双向绑定的
    -->
    <input type="text" ng-model="name" value=""/>

    <!--angular的表达式-->
    {{ name }}

    <input type="text" ng-model="name" value=""/>

   <script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

</body>
```

**效果：**

![](/files/-LfnTGAY_VBRbuLKZsHl)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://xiaoxiami.gitbook.io/angularjs/shu_ju_bang_ding.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
