分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

angularjs的数据双向绑定怎么实现的?

发布时间:2023-09-06 02:10责任编辑:赖小花关键词:js

一. 单向绑定(ng-bind)和双向绑定(ng-model)的区别:

1.ng-bind 单向数据绑定($scope->view),用于数据显示,简写形式,{{}}。

<span ng-bind="val"></span><span>{{val}}</span>

而这两者的区别,在于页面没有加载完毕时,{{val}}会直接显示到页面,直到angular渲染该绑定数据,这种写法可能将{{val}}让用户看到;而ng-bind则在angular渲染完毕后将数据显示。

2.ng-model是双向数据绑定($scope->view , view->$scope),用于绑定值会变化到数据。

<input type="text" ng-model="val" ?/>

二. angularjs双向数据绑定原理

这里有三个概念:

1.  $digest(): 脏值检查循环;

2. $watch(): 监听;

3. $apply(): 上下文执行表达式.

angularjs脏值检查机制只在指定事件触发后,才会进入$digest cycle,包括:

1.dom事件,如文本输入,点击事件等。

2. XHR响应事件($http/$https);

3.浏览器Location变更事件($location);

4.Timer事件($timeout, $interval);

5.执行$digest()或$apply();

->上述事件发生

->$digest()循环

->触发每个watcher

->watcher检查scope中,当前model值和上一次计算得到的model值是否一致

->如果不同,则$watch()对应的回调函数会被执行

->调用该函数的结果,就是view中的表达式内容会被更新。

angularjs并不直接调用$digest(),而是调用$scope.$apply(),后者会调用$rootScope.$digest()。所以,一轮$digest()循环在$rootScope开始,然后会访问到所有到子scope中到watchers。

angularjs的数据双向绑定怎么实现的?

原文地址:https://www.cnblogs.com/starrk-01/p/9498569.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved