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});
};
}]);

  

angularjs中 $watch 和$on 2种监听的区别?的更多相关文章

  1. Android中Button的五种监听事件

    简单聊一下Android中Button的五种监听事件: 1.在布局文件中为button添加onClick属性,Activity实现其方法2.匿名内部类作为事件监听器类3.内部类作为监听器4.Activ ...

  2. Android------三种监听OnTouchListener、OnLongClickListener同时实现即其中返回值true或者false的含义

    引自:http://5200415.blog.51cto.com/3851969/1003113 android应用中常用的监听OnTouchListener.OnClickListener.OnLo ...

  3. OnClickListener两种监听方法

    //1种:接口OnClickListener ,在onclick响应 public class MainActivity extends Activity implements OnClickList ...

  4. jQuery中四种事件监听的区别

    原文链接:点我 我们知道jquery提供了四种事件监听方式,分别是bind.live.delegate.on,下面就分别对这四种事件监听方式分析. 已知有4个列表元素: 列表元素1 列表元素2 列表元 ...

  5. java中的四种监听类用法

    在此列举四种方法: 自身类实现ActionListener接口,作为事件监听器 通过匿名类处理 通过内部类处理 通过外部类处理 下面依次介绍: 第一种:自身类实现ActionListener接口,作为 ...

  6. jquery四种监听事件的区别

    最近找工作被问到了jquery有哪些事件监听,都有什么区别,忽然有点想不起来了... 然后上网上查看了相关的资料,总结一下,方便大家查看,也方便自己复习! 1.bind()方法: bind(type, ...

  7. RecyclerView的2种监听方式

    NO.1:在自己定义适配器的ViewHolder里面写监听事件 //RecyclerView适配器 public class RecyclerViewAdapter extends RecyclerV ...

  8. javascript:判断支持哪种监听

    if (typeof window.addEventListener != "undefined") { window.addEventListener("load&qu ...

  9. Android ScrollView监听滑动到顶部和底部的两种方式(你可能不知道的细节)

    Android ScrollView监听滑动到顶部和底部,虽然网上很多资料都有说,但是不全,而且有些细节没说清楚 使用场景: 1. 做一些复杂动画的时候,需要动态判断当前的ScrollView是否滚动 ...

随机推荐

  1. 使用jxls技术导入Excel模版数据(转自其他博客)

    第一步:先确定好Excel导入的格式以及各表格字段值的含义 第二步:定义好解析的XML--videoConfig.xml <?xml version="1.0" encodi ...

  2. Linux Mint 18.2安装后需要进行的设置

    自己的笔记本电脑升级到win10后各种不好用,运行速度慢,开关机时间很长,系统也是经常性的更新,外加发热严重.更改设置和更换驱动都没能解决问题.另外感觉在Linux下能够更加专注,所以索性将主系统更换 ...

  3. 架设Git服务器

    架设Git服务器项目 Git Candy:http://github.com/Aimeast/GitCandy/ AE大神的作品, Git Candy© 是一个基于ASP.NET MVC的Git分布式 ...

  4. GetDIBits 提示堆栈损坏的解决办法

    ...... BITMAPINFOHEADER bi; bi.biSize = sizeof(BITMAPINFOHEADER); bi.biWidth = bmpScreen.bmWidth; bi ...

  5. ADOBE READER把PDF转换成WORD教程

    目前国外很多软件的支持信息都使用PDF方式进行发布,如果没有Adobe  Reader,无法查看其内容,如果没有相关的编辑软件又无法编辑PDF文件.转换为DOC格式则可以实现编辑功能.尽管有些软件也可 ...

  6. ieHTTPHeaders使用方法

    在http://www.blunck.se/iehttpheaders.html下载软件打开IE浏览器查看-->浏览器栏-->ieHTTPHeaders可以查看httpheader tra ...

  7. springmvc常用注解标签详解(转载)

    1.@Controller 在SpringMVC 中,控制器Controller 负责处理由DispatcherServlet 分发的请求,它把用户请求的数据经过业务处理层处理之后封装成一个Model ...

  8. 通俗易懂的来讲讲DOM——科普性质的DOM入门教程

    DOM这个东西很重要,不过初学的时候很容易蒙,什么Document.Element.Node用官方语言来解释根本就不是人话,只能在实践中硬着头皮一点一点尝试.今天要推荐的是一篇关于DOM的博客.说是教 ...

  9. 牛客网多校训练第一场 B - Symmetric Matrix(dp)

    链接: https://www.nowcoder.com/acm/contest/139/B 题意: 求满足以下条件的n*n矩阵A的数量模m:A(i,j) ∈ {0,1,2}, 1≤i,j≤n.A(i ...

  10. TensorFlow基础(二)实现神经网络

    (1)前向传播算法 神经网络的前向传播算法主要构成部分: 1.神经网络的输入: 2.神经网络的连接结构:神经网络是由神经元(节点)构成的 3.每个神经元中的参数. (2)TensorFlow随机数生成 ...