angularjs中 $watch 和$on 2种监听的区别?

1.$watch简单使用

$watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你。

 

$watch(watchExpression, listener, objectEquality);

每个参数的说明如下:

  1. watchExpression:监听的对象,它可以是一个angular表达式如'name',或函数如function(){return $scope.name}。

  2. listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数:newValue(新值), oldValue(旧值), scope(作用域的引用)

  3. objectEquality:是否深度监听,如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化. 如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它

 

$watch可以监听多个模型的变化

<body ng-app="app" ng-controller="first">
<button ng-click="name='a'">1</button>
<button ng-click="name='b'">2</button>
<button ng-click="name='c'">3</button>
<button ng-click="type=2">4</button>
<button ng-click="type=3">5</button>
<p>{{name}}</p>
</body>
<script type="text/javascript">
var app = angular.module("app", []);
app.controller("first", function($scope) {
$scope.name = 'q';
$scope.type = 1;
function te() {
console.log($scope.name " "  $scope.type);
}
$scope.$watch('name type', function(newValue, oldValue) {                 //2个参数为 一个为新值,一个为旧值
te();
});
})
</script>

 

2.$on的用法

$on是一个scope函数,用于监听事件的变化,当你的事件发生时它会通知你。

module.controller('freefedCtrl',['$scope',function($scope){
//监听directiveClick事件
$scope.$on('directiveClick',function(event,param){
console.log( param );    // 打印结果 {title : '我是来自指令子级作用域'}
});
$scope.change = function(title){
var result = '请注意接收父级广播';
//向子级作用域广播parentBroadcast事件
$scope.$broadcast('parentBroadcast',{msg : result});
};
}]);

  


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/363335.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【原】.Net创建Excel文件(插入数据、修改格式、生成图表)的方法

1.添加Excel引用 可以在.Net选项卡下添加Microsoft.Office.Interop.Excel引用&#xff0c;或在COM下添加Microsoft Excel 12.0 Object Library。它们都会生成Microsoft.Office.Interop.Excel.dll。 2.创建Excel。 有两种方法创建一个Excel Workbook实例。 1.需要一个模板文件&…

求助:安装程序无法创建一个DCOM用户帐号来注册.....\valec.exe

http://support.microsoft.com/kb/257413/ 这是Visual Studio的一个BUG&#xff0c;只出现在Windows 2000/XP下。如果你不使用Visual Studio Analyzer&#xff0c;可以在安装时选择Custom&#xff0c;然后在Enterprise Tools中清除掉Visual Studio Analyzer。再安…

Spring / Hibernate使用log4jdbc改进了SQL日志记录

Hibernate提供了开箱即用的SQL日志记录&#xff0c;但是这种日志记录仅显示准备好的语句&#xff0c;而不显示发送到数据库的实际SQL查询。 它还不会记录每个查询的执行时间&#xff0c;这对于性能故障排除很有用。 这篇博客文章将介绍如何设置Hibernate查询日志记录&#xff…

快递API接口

快递100 转载于:https://www.cnblogs.com/onesmail/p/10608600.html

js中split()和join()的用法

Split()方法&#xff1a;把一个字符串分割成字符串数组 如上所示&#xff1a;把字符串a按空格分隔&#xff0c;得3个字符串数组。 在如&#xff1a; var a”hao are you” a.split(“”); 得到[h,a,o,a,r,e,y,o,u]; Join方法: 把数组中的所有元素转换为一个字符串 如上图所…

IT行业经典面试题,121套面试题

IT行业经典面试题&#xff0c;121套面试题 资源大小&#xff1a; 580.80KB资源类型&#xff1a;发布人&#xff1a; eyelife 发布日期&#xff1a; 2天前Tag&#xff1a; 名企,计算机 资源分&#xff1a; 10下载人数&#xff1a; 857 4.33/347人评分 12 3 4 5 评论 分享…

词云第一次实践,参考学校老师讲的一些知识点还有网上大佬的代码实现

from wordcloud import WordCloudimport cv2import jiebawith open(1906月考.txt, r, encodingutf-8) as f: # 以读的方式打开词云参考的文档 text f.read() # 阅读cut_text .join(jieba.cut(text)) # 通过jieba库的cut精确模式进行分词# 得到词云形状color_mask cv2…

Spring Integration 4.0:完整的无XML示例

1.简介 Spring Integration 4.0终于发布了 &#xff0c;并且此版本具有非常好的功能。 本文介绍的一种可能性是完全不使用XML即可配置集成流程。 那些不喜欢XML的人仅使用JavaConfig就可以开发集成应用程序。 本文分为以下几节&#xff1a; 介绍。 流程概述。 弹簧配置。 …

http协议组成(请求状态码)

http请求由&#xff1a;请求行&#xff1b;消息报头&#xff1b;请求正文组成 //请求行 Request URL: http://172.32.4.33:8080/operation/v2/autoServer/queryAutoServer.htm //请求地址 Request Method: POST …

CSS伪类的三种写法

今天逛蓝色时&#xff0c;无意发现了有人讨论伪类的正确写法&#xff0c;让我对伪类的认识也更清晰了&#xff0c;转贴于此&#xff0c;以备日后查询(原贴当时没记下地址&#xff0c;已经记不得了) Code<style>a.tb{text-decoration:none;}a.tb:link{color:#FF9900;}a.tb…

sql自动生成golang结构体struct实体类

废话不多说直接上地址 使用地址http://www.linkinstars.com:8090/auto-code 项目github https://github.com/LinkinStars/Auto-Coding 是上次内容的一个更新&#xff0c;方便自己用&#xff0c;希望你也喜欢https://www.cnblogs.com/linkstar/p/10037629.html &#xff08;半个…

如何通过示例在Java中使用CopyOnWriteArraySet

CopyOnWriteArraySet是CopyOnWriteArrayList类的弟弟。 这些是专用集合类&#xff0c;这些类是在JDK 1.5上添加的&#xff0c;以及它们最流行的表亲ConcurrentHashMap 。 它们是并发收集框架的一部分&#xff0c;位于java.util.concurrent包中。 CopyOnWriteArraySet最适合作为…

生成器

一、什么是生成器 通过列表生成式&#xff0c;我们可以直接创建一个列表。但是&#xff0c;受到内存限制&#xff0c;列表容量是有限的。而且&#xff0c;创建一个包含100万个元素的列表&#xff0c;不仅占用很大的存储空间&#xff0c;如果我们仅仅需要访问前面几个元素&#…

VS2008快捷键大全

CtrlmCrtro折叠所有大纲CtrlMCrtrP: 停止大纲显示CtrlKCrtrC: 注释选定内容CtrlKCrtrU: 取消选定注释内容CtrlJ : 列出成员 智能感知ShiftAltEnter: 切换全屏编辑CtrlB,T / CtrlK,K: 切换书签开关CtrlB,N / CtrlK,N: 移动到下一书签 CtrlB,P: 移动到上一书签 CtrlB,C: 清除全部…

jQuery 入口函数主要有4种写法

jqery 入口函数主要有4种写法&#xff0c;其中以第3种方法最为方便。 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"…

面向对象的三大特征 封装继承多态

面向对象设计 和开发程序的好处 交流更加流畅 、提高设计和开发效率 封装将类的某些信息隐藏在类内部&#xff0c;不允许外部程序直接访问&#xff0c;而是通过该类提供的方法来实现对隐藏信息的操作和访问私有化属性 提供公有化的访问方法 保证数据的安全性封装的步骤 …

Spring / Hibernate应用程序的性能调优

对于大多数典型的Spring / Hibernate企业应用程序&#xff0c;应用程序性能几乎完全取决于其持久层的性能。 这篇文章将讨论如何确认我们是否存在“数据库绑定”应用程序&#xff0c;然后逐步讲解7个经常使用的“快速取胜”技巧&#xff0c;这些技巧可以帮助提高应用程序性能。…

我的学习开发环境,呵呵!

今天到电子市场去&#xff0c;花了近700块&#xff0c;弄了块ARM的学习单板&#xff0c;再也不用去搞什么虚拟机了&#xff01; 简单的看了一下开发手册&#xff0c;还有点麻烦&#xff0c;可能得花点时间去把它搞清楚&#xff01; 但这块单板的功能还是很强的&#xff0c;基本…

Java on Windows Mobile

Moved to http://blog.tangcs.com/2008/05/29/java-on-windows-mobile/转载于:https://www.cnblogs.com/WarrenTang/archive/2008/05/29/1209726.html

Jsの练习-数组常用方法

1. join() 方法&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv"X-UA-Comp…