The example in this article describes the watch listening usage in Angularjs. Share to everyone for your reference, specific as follows:
Angular Monitor use:
When the angular data model changes, we need to trigger other events if necessary according to his changes.
$watch is a scope function that listens to the changes in the model and notifies you when part of your model changes.
$watch (watchexpression, Listener, objectequality);
| Watchexpression | An expression to monitor |
| Listener | Processing functions, function parameters are as follows function (Newvalue,oldvalue, scope) |
| Objectequality | Depth listening, if set to true, tells angular to check for changes to each property in the object being monitored. If you want to monitor the individual elements of an array or the properties of an object rather than an ordinary value, you should use it |
<!DOCTYPE html> <html ng-app="app"> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <script src="assets/angular.min.js"></script> <script src="assets/js/jquery.min.js"></script> <script type="text/javascript"> var app=angular.module("app",[]); app.controller('MainCtrl', function($scope) { $scope.name = "Angular"; $scope.updated = -1; $scope.$watch('name', function(newValue, oldValue) { if (newValue === oldValue) { return; } // AKA first run $scope.updated++; }); var i=0; $scope.getScope=function(){ // console.info(this); var obj=$("#btnTest"); i++; angular.element( obj).scope().name="hello" +i; } }); </script> <body ng-controller="MainCtrl"> <input ng-model="name" /> Name updated: {{updated}} times. <button id="btnTest" ng-click="getScope()">获取scope</button> </body> </html>
This code monitors the change in the name value of the $scope and triggers the listener if a change occurs.
Monitoring objects:
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script src="assets/angular.min.js"></script>
<script src="assets/js/jquery.min.js"></script>
<script type="text/javascript">
var app=angular.module("app",[]);
app.controller('MainCtrl', function($scope) {
$scope.user = { name: "Fox" };
$scope.updated = -1;
var watch=$scope.$watch('user', function(newValue, oldValue) {
if (newValue === oldValue) { return; }
$scope.updated++;
$scope.$broadcast('userUpdate', newValue.name);
});
//watch();
var i=0;
$scope.$on('userUpdate',function(d,data){
console.info(data);
})
$scope.getScope=function(){
// console.info(this);
var obj=$("#btnTest");
i++;
angular.element( obj).scope().user.name="hello" +i;
}
});
</script>
<body ng-controller="MainCtrl">
<input ng-model="user.name" />
Name updated: {{updated}} times.
<button id="btnTest" ng-click="getScope()">获取scope</button>
</body>
</html>
Here we click on the button to find that the monitor does not trigger, because we monitor the user object, the user object does not change, except that the attribute value has changed.
If we want to monitor the changes in the user object properties, there are two practices.
1. Use depth monitoring.
The method is as follows:
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script src="assets/angular.min.js"></script>
<script src="assets/js/jquery.min.js"></script>
<script type="text/javascript">
var app=angular.module("app",[]);
app.controller('MainCtrl', function($scope) {
$scope.user = { name: "Fox" };
$scope.updated = -1;
var watch=$scope.$watch('user', function(newValue, oldValue) {
if (newValue === oldValue) { return; }
$scope.updated++;
$scope.$broadcast('userUpdate', newValue.name);
},true);
//watch();
var i=0;
$scope.$on('userUpdate',function(d,data){
console.info(data);
})
$scope.getScope=function(){
// console.info(this);
var obj=$("#btnTest");
i++;
angular.element( obj).scope().user.name="hello" +i;
}
});
</script>
<body ng-controller="MainCtrl">
<input ng-model="user.name" />
Name updated: {{updated}} times.
<button id="btnTest" ng-click="getScope()">获取scope</button>
</body>
</html>
Set to depth monitoring, as long as the object changes, then the listener will trigger.
2. Direct write object's attribute value path.
var watch= $scope. $watch (' User.Name ', function (NewValue, oldValue) {
//specific code is not all written.
Eliminate listening
Too much monitoring in the system affects the performance of the system, and we can remove the interception after satisfying certain conditions.
Remove the listening method as follows:
var watch= $scope. $watch (' user ', function (NewValue, oldValue) {
if (newvalue = = OldValue) {return;}
$scope. updated++;
$scope. $broadcast (' userupdate ', newvalue.name);
},true)
; Remove the listening.
Watch ();
Use event broadcasts in the system.
For example, when listening, we broadcast an event to the outside world,
The processing method in which the write listener is controlled:
Examples are as follows:
$scope. $broadcast (' userupdate ', newvalue.name);
Listening Code:
$scope. $on (' Userupdate ', function (d,data) {
console.info (data);
})
This approach is best used in the instruction, the instructions broadcast the event, in the Controller to implement monitoring. The benefit is to implement code reuse.
I hope this article will help you to Angularjs program design.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
