angularJS $scope.$watch的使用

本文深入探讨Angular框架中的$watch函数,包括其基本用法、参数说明、实例应用以及性能问题与优化策略。重点突出如何正确使用$watch以避免性能瓶颈,通过实例演示了如何监听模型变化并响应更新。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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


$watch(watchExpression, listener, objectEquality);

每个参数的说明如下:

引用:[url]http://yuankeqiang.lofter.com/post/8de51_1454f93[/url]
watchExpression:监听的对象,它可以是一个angular表达式如'name',或函数如function(){return $scope.name}。

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

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

$scope.name = 'hello';

var watch = $scope.$watch('name',function(newValue,oldValue, scope){

console.log(newValue);

console.log(oldValue);

});

$timeout(function(){

$scope.name = "world";

},1000);

$watch性能问题

太多的$watch将会导致性能问题,$watch如果不再使用,我们最好将其释放掉。

$watch函数返回一个注销监听的函数,如果我们想监控一个属性,然后在稍后注销它,可以使用下面的方式:

var watch = $scope.$watch('someModel.someProperty', callback);

//...

watch();


还有2个和$watch相关的函数:

$watchGroup(watchExpressions, listener);

$watchCollection(obj, listener);
AngularJS中,可以使用$watch来监控数据的变化,并在变化时执行相应的操作。如果要实现千分位的显示效果,可以使用以下步骤: 1. 创建一个$scope变量来保存要监控的数据。 2. 使用$watch来监控这个变量的值的变化。 3.$watch的回调函数中,根据变化的值进行千分位格式化处理。 4. 根据具体需求,可以使用正则表达式或其他方法来实现千分位的显示效果。 具体代码示例如下: ```javascript // 在控制器中定义一个$scope变量来保存要监控的数据 $scope.number = 1000; // 使用$watch来监控number变量的值的变化 $scope.$watch('number', function(newVal, oldVal) { // 在回调函数中进行千分位格式化处理 if (newVal !== oldVal) { // 使用正则表达式来添加千分位 var formattedNumber = newVal.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); // 更新显示的数据 $scope.formattedNumber = formattedNumber; } }); ``` 在上述代码中,我们使用了正则表达式来将数字格式化为千分位的显示效果。具体来说,通过使用`\B(?=(\d{3})+(?!\d))`来匹配不是单词边界的位置,然后在这些位置后面添加逗号,从而实现千分位的显示效果。 请注意,以上代码仅为示例,具体的实现方式可能会根据具体的需求和代码结构而有所不同。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [angular 实现的输入框数字千分位及保留几位小数点功能示例](https://blog.csdn.net/weixin_39886929/article/details/111756365)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* [JS的千分位算法实现思路](https://download.csdn.net/download/weixin_38712874/13057799)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值