angularjs中 $watch 和$on 2种监听的区别？
Posted 晓风零乱
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了angularjs中 $watch 和$on 2种监听的区别？相关的知识，希望对你有一定的参考价值。
1.$watch简单使用
$watch是一个scope函数，用于监听模型变化，当你的模型部分发生变化时它会通知你。
$watch(watchExpression, listener, objectEquality);
每个参数的说明如下：
-
watchExpression：监听的对象，它可以是一个angular表达式如‘name‘,或函数如function(){return $scope.name}。
-
listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数：newValue(新值), oldValue(旧值), scope(作用域的引用)
-
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种监听的区别？的主要内容，如果未能解决你的问题，请参考以下文章
AngularJS中的$watch()，$digest()和$apply()
如何在 AngularJS 中使用 $scope.$watch 和 $scope.$apply？