angular的$watch方法详解-H5教程-PHP中文网

在$apply方法中提到过脏检查，首先apply方法会触发evel方法，当evel方法解析成功后，会去触发digest方法，digest方法会触发watch方法。

(1)$watch简介

在digest执行时，如果watch观察的的value与上一次执行时不一样时，就会被触发。

AngularJS内部的watch实现了页面随model的及时更新。

$watch方法在用的时候主要是手动的监听一个对象，但对象发生变化时触发某个事件。

(2)watch方法用法

$watch(watchFn,watchAction,deepWatch)

watchFn:angular表达式或函数的字符串

watchAction(newValue,oldValue,scope):watchFn发生变化会被调用

deepWatch：可选的布尔值命令检查被监控的对象的每个属性是否发生变化

$watch会返回一个函数，想要注销这个watch可以使用函数

(3)例子

在前面的例子中，当name的表单改变30次，然后触发某个事件。

控制器代码如下：

jQuery图片内容展开-收缩选项卡

jQuery图片内容展开/收缩选项卡，点击图片会出现对应的文字解说。兼容主流浏览器，php中文网推荐下载！使用方法： 1、head区域引用以下文件

运行效果如下：

前30次可以随意修改：

当修改了30次后，name固定为'已经大于30次了'：

这就是watch的作用，model每一次改变时都会触发第二个函数。

(4)watch的第三个参数

当监听的为一个对象或者数组时，例如：

$scope.data = {
        name :'李四',
        count:20
    }

此时data里的name和count都要监听，那么可以这么写：

1
2
3

    $scope.$watch('data',function(){
 
    },true)

如果不加第三个参数，那么只会监听data，只有当data引用改变时才会触发。

因此当需要监听一些引用对象需要把第三个参数设置成true。

H5页面制作中如何嵌入地图定位服务主流地图API接入方法详解

H5页面制作中如何处理字体兼容性问题跨平台字体适配完美解决方案

H5页面制作中如何集成第三方API 手把手教你快速接入常用API接口

H5页面如何实现弹窗广告延时显示智能延时弹窗实现方法详解

H5页面如何实现手势滑动交互效果常用手势操作实现方案解析

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：h5头像图片旋转css3精确控制每个图片的位置下一篇：MUI顶部选项卡的用法

作者最新文章

JavaScript数组去重算法实例

2018-05-23 14:56

如何解决关于thinkphp模型中hasOne中字段同名的问题

2018-05-23 16:49

关于Js中 find 方法不支持IE的问题

2018-05-23 15:42

Centos下yum怎么安装php7？

2018-05-18 11:30

通过手机浏览器打开APP或者跳转到下载页面的实现

2018-05-28 17:47

从给数组中的对象去重看js中的reduce()

2018-05-19 17:05

还原数据库，数据库提示正在还原中的处理方法

2018-05-18 15:44

如何解决vue 集成 axios 发送post请求 payload导致后台无法接收到数据问题

2018-05-19 14:46

Javascript中pixi框架初探

2018-05-19 13:54

JavaScript实现“创意时钟”项目

2018-05-30 14:36

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI大模型

开放平台

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI大模型

腾讯元宝

腾讯混元平台推出的AI助手

文档处理

Excel 表格

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI大模型

中文写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

中文写作

写作工具

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

图画生成

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI大模型

中文写作

智谱清言 - 免费全能的AI助手

AI大模型

PDF 文档

相关专题

云朵浏览器入口合集

本专题整合了云朵浏览器入口合集，阅读专题下面的文章了解更多详细地址。

2026.01.20

Java JVM 原理与性能调优实战

本专题系统讲解 Java 虚拟机（JVM）的核心工作原理与性能调优方法，包括 JVM 内存结构、对象创建与回收流程、垃圾回收器（Serial、CMS、G1、ZGC）对比分析、常见内存泄漏与性能瓶颈排查，以及 JVM 参数调优与监控工具（jstat、jmap、jvisualvm）的实战使用。通过真实案例，帮助学习者掌握 Java 应用在生产环境中的性能分析与优化能力。

2026.01.20

PS使用蒙版相关教程

本专题整合了ps使用蒙版相关教程，阅读专题下面的文章了解更多详细内容。

162

2026.01.19

java用途介绍

本专题整合了java用途功能相关介绍，阅读专题下面的文章了解更多详细内容。

120

2026.01.19

java输出数组相关教程

本专题整合了java输出数组相关教程，阅读专题下面的文章了解更多详细内容。

2026.01.19

java接口相关教程

本专题整合了java接口相关内容，阅读专题下面的文章了解更多详细内容。

2026.01.19

xml格式相关教程

本专题整合了xml格式相关教程汇总，阅读专题下面的文章了解更多详细内容。

2026.01.19

PHP WebSocket 实时通信开发

本专题系统讲解 PHP 在实时通信与长连接场景中的应用实践，涵盖 WebSocket 协议原理、服务端连接管理、消息推送机制、心跳检测、断线重连以及与前端的实时交互实现。通过聊天系统、实时通知等案例，帮助开发者掌握使用 PHP 构建实时通信与推送服务的完整开发流程，适用于即时消息与高互动性应用场景。

2026.01.19