angular1.x的数据响应机制

最新推荐文章于 2020-09-29 12:01:55 发布
转载 最新推荐文章于 2020-09-29 12:01:55 发布 · 185 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://juejin.im/post/5bd07131f265da0a867c782c
文章标签：

#javascript #ViewUI

本文深入探讨了Angular框架中独特的脏检查机制。Angular并非实时监听数据变动，而是通过周期性的遍历$scope对象，检查属性值变化，利用dirty变量标记状态，直至属性值稳定，从而高效更新界面。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

那么，在代码层面，angular是怎么做到监听数据变动然后更新界面的呢？答案是，angular根本不监听数据的变动，而是在恰当的时机从$rootScope开始遍历所有$scope，检查它们上面的属性值是否有变化，如果有变化，就用一个变量dirty记录为true，再次进行遍历，如此往复，直到某一个遍历完成时，这些$scope的属性值都没有变化时，结束遍历。由于使用了一个

dirty变量作为记录，因此被称为脏检查机制。复制代码
angular1.x $watch 监听的简单应用
曾经沧海难为水的博客
11-28 1329
$watch(watchExpression, listener, objectEquality); watchExpression： 被监听的对象 listener: 包含3个值 newValue , oldValue, scope（可以引用一个作用域） objectEquality：是否使用angular.equals方法比对 <!DOCTYPE html> <h
angularjs 动态监控数据
归小超博客
09-16 9079
第一种比较简单，利用的就是其自带的$watch方法监听 <div ng-controller="myCtrl"> <input type="text" ng-model="formModel.controller_name"/> </div> <script> var app = angular.module('myCtrl', ['ng']...
angular-select:角度选择是角度1.x的响应式和可自定义选择。 一个简单的指令以及一个配置对象，您就可以开始了
05-02
角度选择 角度选择是角度1.x的响应式和可自定义选择。 一个简单的指令以及一个配置对象，您就可以开始使用。 使用npm安装 npm install angular-select-option --save 在您的html和模块中将脚本作为依赖项导入： 该项目取决于Angular和jQuery <!-- Dependencies --> < script src =" <your> </ script > < script src =" <your> </ script > <!-- Script --> < script src =" <your> </ scri
Angular数据绑定、响应式编程、管道
weixin_44174685的博客
12-25 417
Angular数据绑定
angular知识点--响应式编程
奇怪的人类
09-29 406
碎碎念：知识点梳理归纳，如果有什么不对的感谢大家指正一起学习！ 响应式编程： 异步数据流编程 是以观察者模式为核心的，以及Rxjs相关概念 由两个对象组成：可观察对象和观察者 可观察对象Observable（流）：表示一组值或者事件的集合（被观察者） 观察者Observer：一个回调函数集合，他知道怎样去监听被Observable发送的值 订阅Subscription：表示一个可观察对象，主要用于取消注册 操作符Operators：纯粹的函数，使开发者可以以函数编程的方式处理集合 举例： .
angular1.x 移动端开发webapp.zip
最新发布
03-16
6. **依赖注入（Dependency Injection）**：Angular 1.x的依赖注入机制能帮助开发者轻松地管理和测试代码，通过自动注入所需的服务，减少了代码间的耦合。 7. **移动优化**：为了适应移动端，Angular 1.x有几种最佳...
Angular1.x安装与配置1
08-03
Angular1.x，作为AngularJS的一个早期版本，是一个由Misko Hevery和Adam Abrons于2009年创建，后来由谷歌维护的开源Web应用程序框架。它的设计目标是简化大型Web应用的构建，同时保持高性能和易维护性。Angular1.x的...
Angular 4.x 动态创建表单实例
08-30
在Angular 4.x中，动态创建表单是一种常见的需求，它允许开发者根据数据动态地构建表单组件，适应不同的场景和用户需求。本文将详细讲解如何在Angular 4.x中实现动态表单的创建。 首先，我们需要创建一个`...
基于Angular1.x的单页面应用前端框架解析
1. 双向数据绑定（Two-way Data Binding）：AngularJS的双向数据绑定机制能够保证数据模型与视图层之间的同步，即当模型数据发生改变时，视图层会自动更新以反映这些变化；反之，用户在界面上的修改也会即时反映到...
Angular 4.x响应式表单Reactive Forms深度解析
在Angular 4.x中，开发者可以选择使用两种类型的表单：模板驱动式表单（Template-Driven Forms）和响应式表单（Reactive Forms）。本篇文章主要聚焦于响应式表单，这是一种模型驱动的方式，它提供了更高级别的控制和...
Angular中使用$watch监听object属性值的变化
justforuse的博客
08-18 1万+
Angular中的$watch可以监听属性值的变化，然后并做出相应处理。 常见用法：$scope.$watch("person", function(n, o){ //todo something... })但是对于一个对象中的某个属性值变化时，$watch似乎不管用了。 示例代码：<body> <div ng-controller="mainCtrl"> <in
实现监听localStorage的值变化，实现页面自动提示功能
weixin_44788637的博客
07-28 1723
做项目的某个功能中遇到一个异步加载需要等待一两分钟，所以想实现一个异步加载完成后自动提示用户完成加载的功能。为了实现用户在等待过程中可以进行路由之间的跳转，访问其他内容，并且angular进行路由跳转后会销毁组件，但是已经进行的异步加载还是会进行。所以采用localStorage存储某个提示变量，实现加载完成后的提示。 代码如下： 在全局代码设置监听事件 // 设置监听localStorage.setItem事件改变 const orignalSetItem = localStorage.se
angular原理及模块简介
热门推荐
ZZ的博客
11-22 1万+
本人前端小白，奈何在公司在做一个PC端的程序，用angular写，不得不自学了一下angular框架。虽然在工作过程中勉强勉强够了，但是觉得既然用了就稍微了解得全面一点，所以花了几个晚上看了一下angular的developer guide，大概知道了一点点angular这个东东到底是干啥，后来又花了几个晚上做点小记录，防止以后忘了。   Angular简介（大神可略过） Angular是一
Angular1.x 根据数据结构创建动态菜单无限嵌套循环--指令版
xuehu837769474的博客
04-26 892
目标：根据数据生成动态菜单，希望可以根据判断是否有子集无限循环下去 菜单希望的样子是这样的： 菜单数据是这样的： $scope.expanders = [{ title: 'title1', link: 'xx/xx', child:[ { title: 'child2', link: 'xx/xx' ...
记一下angular.js 1.x 关于post提交后台无法接受数据解决方案
weixin_33910759的博客
10-11 116
2019独角兽企业重金招聘Python工程师标准>>> ...
Angular_刷新当前页面，刷新当前路由
Martin 的博客
07-16 1万+
window.location.refresh()即可
Angular 事件_Angular $event - angular 基础教程 - Angular 教程网
后台模板
02-02 1万+
转载自 http://www.ngui.cc/news/show-113.html 获取鼠标事件 在第三节的示例中，假如我们需要获取鼠标事件，那应该怎么办呢？这时，我们可以引入 $event 变量，具体如下： import {Component, OnInit} from '@angular/core'; @Component({ selector: 'app-simple-
angularjs数据监听的两种方法
me_never的博客
01-01 7565
在angularjs中有时候路由跳转比值的传递或者赋值快一些，导致页面已经跳转了，而值还没有过来，进而会导致一些报错，所以就需要去监听某些关键的参数。 第一种方法：angularjs的$watch &amp;amp;amp;lt;div ng-controller=&amp;amp;quot;myCtrl&amp;amp;quot;&amp;amp;amp;gt; &amp;amp;amp;lt;input type=&amp;amp;quot;te
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值