分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

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

发布时间:2023-09-06 02:03责任编辑:顾先生关键词:js

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种监听的区别?

原文地址:https://www.cnblogs.com/8080zh/p/9288107.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved