AngularJs使用ng-model-options设置数据同步时机提高网站性能

最新推荐文章于 2018-12-21 17:22:55 发布

K'illCode

最新推荐文章于 2018-12-21 17:22:55 发布

阅读量324

点赞数

分类专栏： angularJS 文章标签： angularJs

本文链接：https://blog.csdn.net/Dome_/article/details/79277258

版权

37 篇文章 0 订阅

订阅专栏

之前讲过ng-model可以实时改变数据，实现双向数据绑定，但是如果数据是联通后台的，那么当就会实时与后台进行交互，肯定会增加后台的压力，影响性能，比如以下代码：

 
       1<input type="text" ng-model="data"/>
 
       2<p>{{data}}</p>

因为它的数据是实时更新的，这里可以用一个指令：ng-model-options来解决。

第一种：ng-model-options="{updateOn:'blur'}"，当鼠标失去焦点的时候才更新数据：

 
       1<input type="text" ng-model="data" ng-model-options="{'updateOn':'blur'}"/>

第二种：ng-model-options="{debounce:3000}"，指定几秒之后才更新数据：

`1`	`<input` `type="text"` `ng-model="data"` `ng-model-options="{'debounce':3000}"/>`

第三种：结合以上两种情况一块儿使用：

 
       1<input type="text" ng-model="data" ng-model-options="{'updateOn':'default blur', 'debounce':{'default':3000, 'blur':0}}" />

这样可以极高的提升网站性能！

关注