This article will show how you can use $scope.$watch and $scope.$apply in AngularJS.
In AngularJS, $scope.$watch and $scope.$apply are essential tools for handling changes in data and updating the view accordingly.
What is $scope?
In AngularJS, $scope is an object that acts as a bridge between the controller and the view. It holds the data that can be accessed and manipulated by both the controller and the associated view. Changes made to the $scope object in the controller are automatically reflected in the view, and vice versa.
Why use $scope.$watch and $scope.$apply?
$watch: Used to monitor changes in a specific variable within the$scope. It allows you to react to changes in the data and take appropriate actions, such as updating the view.$apply: Manually triggers the digest cycle, which is Angular’s mechanism to update the view when the model changes. It’s essential in scenarios where changes to the model occur outside of Angular’s awareness, such as in asynchronous operations or event handlers.
Here are some examples of using these in AngularJS.
Using $scope.$watch
The $scope.$watch is a function provided by AngularJS that allows you to watch for changes in a specific variable or expression in the $scope. When the specified variable or expression changes, a callback function is executed.
Syntax:
$scope.$watch(watchExpression, listener, [objectEquality]);
watchExpression: The expression to watch for changes.listener: The function to be called whenwatchExpressionchanges.objectEquality(optional) – Default:false: When set totrue, compares the objects for equality rather than for reference.
Example:
app.controller('MyController', function($scope) {
$scope.myData = 'Initial Value';
$scope.$watch('myData', function(newValue, oldValue) {
console.log('Value changed: ' + newValue);
});
});
In this example, whenever myData changes, the provided listener function will be executed.
Using $scope.$apply
The $scope.$apply is used to manually trigger the digestion cycle in AngularJS. This is necessary when you modify the model’s state outside of the AngularJS context, such as in event handlers or asynchronous callbacks. By calling $scope.$apply, AngularJS will detect the changes and update the view accordingly.
Syntax
$scope.$apply([exp]);
exp(optional): An optional expression to execute in the context of the$scope.
Example
app.controller('MyController', function($scope) {
$scope.myData = 'Initial Value';
$scope.updateData = function() {
$scope.$apply(function() {
$scope.myData = 'Updated Value';
});
};
});
In this example, the updateData function changes the value of myData within an $apply block. This is necessary because any asynchronous operation (like an event handler) that changes the model outside of Angular’s knowledge may not trigger a digest cycle, and the view won’t be updated.
Putting it all together
This section provides a complete example that integrates $scope.$watch and $scope.$apply within an AngularJS application. It demonstrates how to set up a controller, define watchers, and use $apply to update the view when data changes.
Example
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="MyController">
<p>Current Value: {{ myData }}</p>
<button ng-click="updateData()">Update Value</button>
<script>
var app = angular.module('myApp', []);
app.controller('MyController', function($scope) {
$scope.myData = 'Initial Value';
$scope.$watch('myData', function(newValue, oldValue) {
console.log('Value changed: ' + newValue);
});
$scope.updateData = function() {
$scope.$apply(function() {
$scope.myData = 'Updated Value';
});
};
});
</script>
</body>
</html>
This example demonstrates a simple AngularJS application with a controller, $scope.$watch, and $scope.$apply. The value of myData is updated both through a watcher and a button click. The console log in the watcher function will show the changes.
Remember, while $scope.$apply is powerful, it should be used cautiously to prevent errors. Always ensure that you’re not triggering unnecessary digest cycles.