前端讲义62_AngularJS的$watch方法_angularjs $watch $root-CSDN博客

本文链接：https://blog.csdn.net/msh2016/article/details/91129314

本文详细介绍了AngularJS中$watch()方法的应用，通过示例代码展示了如何监听$scope作用域内属性的变化，并同步更新$rootScope作用域的属性值。适用于希望深入了解AngularJS双向数据绑定机制的开发者。

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

$watch（）方法可以监听$scope作用域内属性的改变，代码如下：
<body ng-app="empApp">
<div ng-controller="AddCtrl">
   代理人工号：<input type="text" ng-model="empid"><p>
</div>
<div ng-controller="ViewCtrl">
   代理人：{{tmpEmpID}}
</div>

<script type="text/javascript">
// 创建模块
var app = angular.module("empApp", []);
// 注册控制器
app.controller("AddCtrl" , addEmpFun);
function addEmpFun($scope, $rootScope)
{
   $scope.empid = 'C10094207';
   $rootScope.tmpEmpID = $scope.empid;
};
app.controller("ViewCtrl" , function(){
});
</script>
</body>
如上代码中，当$scope作用域内属性发生改变，但是全局作用域却没有，此时应该监控$scope作用域，代码调整如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body  ng-app="empApp">
<div  ng-controller="AddCtrl">
	代理人工号：<input type="text" ng-model="empid"><p>
</div>	
<div ng-controller="ViewCtrl">
	代理人：{{tmpEmpID}}
</div>
	
<script type="text/javascript">
// 创建模块
var app = angular.module("empApp", []); 
// 注册控制器
app.controller("AddCtrl" , addEmpFun);
function addEmpFun($scope, $rootScope)
{
    $scope.empid = 'C10094207';
    $rootScope.tmpEmpID = $scope.empid;
    $scope.$watch("empid",myWatch);
    // 指定监听函数
    function myWatch(newValue, oldValue)
    {
        // 修改后值与原值不相等，改变$rootScope作用域的tmpEmpID属性值
	 if ( newValue !== oldValue ) {
	        $rootScope.tmpEmpID = $scope.empid;
	  }
    };
};
app.controller("ViewCtrl" , function(){
});
		
</script>	
</body>
</html>