前端讲义62_AngularJS的$watch方法

最新推荐文章于 2022-05-25 18:45:22 发布

木生火

最新推荐文章于 2022-05-25 18:45:22 发布

阅读量212

点赞数

分类专栏： Angular

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

版权

Angular 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

$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>

木生火

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端讲义62_AngularJS的$watch方法

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

扫一扫