Home > Developer > Web Develop
1. $watch Simple to use
$watch is a scope function that listens for model changes and notifies you when the part of your model changes.
$watch (watchexpression, Listener, objectequality);
The description of each parameter is as follows:
Watchexpression: The Listener object, which can be a angular expression such as ' name ', or function such as functions () {return $scope. Name}.
Listener: The function or expression that will be called when watchexpression changes, it receives 3 parameters: NewValue (new value), OldValue (old value), scope (scope reference)
Objectequality: If the depth listener is set to true, it tells angular to check for changes in each property in the monitored object. If you want to monitor an individual element of an array or an object's properties instead of a normal value, you should use it
$watch can monitor changes in multiple models
<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 parameters are one for the new value, one for the old value te (); }); }) </script>
2. Usage of $on
$on is a scope function that listens for changes in events and notifies you when your event occurs.
Module.controller (' Freefedctrl ', [' $scope ', function ($scope) { //Listen for Directiveclick event $scope. $on (' Directiveclick ', function (event,param) { console.log (param); Print result {title: ' I am from the instruction sub-scope '} }); $scope. Change = function (title) { var result = ' Please be aware of receiving parent broadcasts '; Broadcasts a Parentbroadcast event $scope to a child scope . $broadcast (' Parentbroadcast ', {msg:result}); }; }]);
Angularjs $watch and $on 2 types of monitoring differences?
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
