JavaScript框架之AngularJS学习——双向数据绑定

来源：互联网发布：mac 照片导出编辑：程序博客网时间：2024/05/16 12:50

AngaularJS学习——双向数据绑定

数据绑定是AngularJS框架最优秀的特性之一，能够帮助Web前端开发人员在很大程度上减少对DOM的操作。

数据绑定是AngularJS框架在视图（DOM元素）与作用域之间佳妮的数据同步机制。所谓“双向”，是指界面的操作能够实时同步到作用域中，作用域中的数据修改也能够实现回显到界面中。

作用域可以被视为一个容器，里面有一些基于key-value的数据。

ng-model：（内置指令）:建立数据绑定，只能用在表单元素上（input,select,option,textarea,button）。

eg:

<body ng-app><div><input type="text" ng-model="message">                <p>{{ message }}</P></div></body>

通过以上代码，input的数据就与p当中的数据绑定了，当input输入改变，p就跟着改变。你可以复制以上代码查看相应的效果。（{{ message }}为AngularJS的表达式形式，可以访问AngularJS作用域里的属性。同时AngularJS还能够监视作用域中数据的变化，数据发生改变时，该位置显示的内容跟着改变。）

ng-bind:实现作用域到视图的单向数据绑定，和表达式功能类似。

上面的例字可以改写成如下：

<body ng-app><div><input type="text" ng-model="message">                //<p>{{ message }}</P>                <p ng-bind="message"><P></div></body>

两种写法所得的结果是一样的，但是在网络不良或者加载速度比较慢的情况下，AngularJS会直接将表达式渲染到页面当中，只有等到数据加载完了之后才会渲染出表达式中相应的内容，但是ng-bind会等到AngularJS加载完成的时候才会对其内容渲染，相较之下ng-bind给用户的体验更好。

只有当我们需要进行运算处理或者使用过滤器对输出内容进行处理是，则必须使用表达式。

以上指令链接可能需要科学上网。

以上笔记整理自个人学习，用做个人学习分享

阅读全文

0 0