Accessing Using $rootScope Object
In this approach, we are using the $rootScope object. This object refers to an object which is accessible from everywhere in the application. This object is mainly a global storage for the data which is to be shared throughout the controllers in the application. Using this object we can update the data within the scope from the functions that are not connected to the specific controller in the application. In the below example, there is the message that is set in the $rootScope, making this globally accessible throughout the application. Here, mainly we are performing the dependy injection where we are simply injecting the objects in our controller function, which includes the scope itself.
Example: Below is an example that demonstrates accessing the scope from outside the js function in AngularJS using $rootScope Object.
HTML
<!DOCTYPE html> <html ng-app="myApp"> <head> <title> AngularJS Scope Access </title> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"> </script> <style> body { font-family: Arial, sans-serif; text-align: center; background-color: #f0f0f0; margin: 0; padding: 0; } .container { max-width: 400px; margin: 0 auto; padding: 20px; border: 1px solid #ccc; border-radius: 5px; background-color: #fff; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); } h1 { color: green; } h3 { color: rgb(0, 0, 0); } p { font-size: 18px; margin: 20px 0; } button { background-color: #007BFF; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; } button:hover { background-color: #0056b3; } </style> </head> <body ng-controller="myController"> <div class="container"> <h1> w3wiki </h1> <h3> Approach 1: Using $rootScope </h3> <p> Message: {{ message }} </p> <button ng-click="updateMessage()"> Update Message </button> <button ng-click="resetMessage()"> Reset Message </button> </div> <script> var app = angular.module('myApp', []); app.controller('myController', function ($scope, $rootScope) { // Set an initial message in the root scope $rootScope.message = "Hello from $rootScope!"; // Function to update the message in the root scope $scope.updateMessage = function () { $rootScope.message = "Message updated using $rootScope!"; }; // Function to reset the message to its initial value $scope.resetMessage = function () { $rootScope.message = "Hello from $rootScope!"; }; }); </script> </body> </html> |
Output
How to access the Scope from outside JS Function in AngularJS ?
In the AngularJS application, we generally need to access the scope from the outside JS function. This can be done using the global scope object like $rootScope or the AngularJS services. Accessing the scope from the outside of JS functions is to enable the manipulation of data in the scope of the application in response to user actions. In this article, we will see how we can access the scope from outside the JavaScript function in AngularJS.
Contact Us