In this article, we will be discussing the $apply() function & how to use it in angularjs. In AngularJS, $apply() function is used to evaluate expressions outside of the AngularJS context (browser DOM Events, XHR). Moreover, $apply has $digest under its hood, which is ultimately called whenever $apply() is called to update the data bindings. We will take an example to give a better understanding.
Without using $scope.$apply() function: In the below code, it can be seen that we have two buttons, but one button has an ng-click event to update the name whereas the other has a standard JavaScript listener to update the name. So, you can see that when the first button is clicked, the name changes from “GFG” to “GFG Rocks” but when the second button is clicked, the name is not updated to “Geeks” due to the absence of $scope.$apply call.
HTML
<!DOCTYPE html>
<html>
<head>
<title>$apply() Function in AngularJs</title>
<script src=
</script>
<script type="text/javascript">
var app = angular.module("applyApp", []);
app.controller("applyCtrl", function ($scope) {
$scope.currentName = "GFG";
$scope.updatedName = function () {
$scope.currentName = "GFG Rocks";
};
// Event listener added
var event = document.getElementById("btnapply");
event.addEventListener("click", function () {
// To update name on rootScope forcefully,
// use $apply function
$scope.currentName = "Geeks";
});
});
</script>
</head>
<body>
<div ng-app="applyApp" ng-controller="applyCtrl">
<h2>$apply() Function in AngularJs</h2>
<input type="button"
value="Click to Update Name"
ng-click="updatedName()" />
<input type="button"
value="Click to Update Name forcefully."
id="btnapply" />
<span style="color: Red">{{currentName}}</span>
</div>
</body>
</html>
|
Output:
Using $scope.$apply() call: In the above code, it can be seen that we have two buttons, but one button has an ng-click event to update the name whereas the other has a standard JavaScript listener to update the name. So, you can see that when the first button is clicked, the name changes from “GFG” to “GFG Rocks” and when the second button is clicked, the name gets updated to “Geeks” due to the presence of $scope.$apply call in this.
HTML
<!DOCTYPE html>
<html>
<head>
<title>$apply() Function in AngularJs</title>
<script src=
</script>
<script type="text/javascript">
var app = angular.module("applyApp", []);
app.controller("applyCtrl", function ($scope) {
$scope.currentName = "GFG";
$scope.updatedName = function () {
$scope.currentName = "GFG Rocks";
};
// Event listener added
var event = document.getElementById("btnapply");
event.addEventListener("click", function () {
$scope.$apply(() => {
// To update name on rootScope
// forcefully, use $apply function
$scope.currentName = "Geeks";
});
});
});
</script>
</head>
<body>
<div ng-app="applyApp" ng-controller="applyCtrl">
<h2>$apply() Function in AngularJs</h2>
<input type="button"
value="Click to Update Name"
ng-click="updatedName()" />
<input type="button"
value="Click to Update Name forcefully."
id="btnapply" />
<span style="color: Red">{{currentName}}</span>
</div>
</body>
</html>
|
Output:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
25 Jul, 2021
Like Article
Save Article