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. qt 样式表基本用法

    Qt样式表 QT样式表参考CSS层叠样式表设计,不同之处在于QT样式表应用于Widget世界. 可以使用QApplication::setStyleSheet()函数设置到整个应用程序上,也可以使用Q ...

  2. Windows下 Mysql启动报1067解决方法

    前几天刚入职安装了一下Mysql  刚开始能打开  今天去公司发现启动不了服务 报1067错误, 在网上查看了一些方法,好多种版本..以下是本人的解决方法 1.打开运行-事件查看器--Windows日 ...

  3. JS复制DOM元素文字内容

    要实现的效果:将HTML页面中的某个DOM元素例如DIV下面的文本内容进行复制. 实现过程如下: <html> <head> <title>Copy text De ...

  4. MySQL案例02:ERROR 1221 (HY000): Incorrect usage of DB GRANT and GLOBAL PRIVILEGES

    MySQL在授权用户时出现报错信息,具体信息如下: 一.错误信息 执行命令: GRANT SELECT,INSERT, UPDATE, DELETE, CREATE, DROP, RELOAD, SH ...

  5. Going Deeper with Convolutions(Inception v1)笔记

    目录 Abstract Introduction First of All Inception Depth Related Work Motivation and High Level Conside ...

  6. postgraSql支持View可以修改的两种方法。

    http://www.postgresqltutorial.com/postgresql-views/ Creating PostgreSQL updatable views – gives you ...

  7. hiredis

    hiredis是redis开源库对外发布的客户端API包. 当redis-server配置启动后,可以通过hiredis操作redis资源. 主要分为: strings.hash.lists.sets ...

  8. js实现抛物线运动 兼容IE低版本(转)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  9. 用jq给link和script标签加随机的版本号(兼容IE5)

    $("link,script").each(function(){ var t=Math.random().toFixed(4); /*var $tag=$(this).prop( ...

  10. 正则工具类 -- RegexUtils

    import java.util.ArrayList; import java.util.List; import java.util.regex.Matcher; import java.util. ...