Hello friends, this article will let you know, How You can access AngularJS Scope at runtime or during JavaScript debugging.
First of all, you need to write an AngularJS Program with Scope variables.
Any one Web Browser Google Chrome or Firefox with developer tools.
jQuery and AngularJS files.
Create a HTML file with following code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SW Class</title>
<style rel="stylesheet" href="/css/bootstrap.min.css"></style>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/angular.min.js"></script>
</head>
<body ng-app="myapp" ng-controller="mycontroller">
<hidden ng-model="hidden" id="ngscopeaccess"></hidden>
<input ng-model="ngcontrol" type="text" id="ngcontrol" />
<div class="container">
{{"Hello World"}}
</div>
</body>
<script type="text/javascript">
var myapp = angular.module("myapp",[]);
myapp.controller("mycontroller",function($scope){
$scope.hidden = 0;
$scope.ngVar = 1;
$scope.ngArray = [1, 2, 3, 4, 5, 6];
$scope.ngJSON = { "web": "swclass", "url": "swclass.com" };
});
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SW Class</title>
<style rel="stylesheet" href="/css/bootstrap.min.css"></style>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/angular.min.js"></script>
</head>
<body ng-app="myapp" ng-controller="mycontroller">
<hidden ng-model="hidden" id="ngscopeaccess"></hidden>
<input ng-model="ngcontrol" type="text" id="ngcontrol" />
<div class="container">
{{"Hello World"}}
</div>
</body>
<script type="text/javascript">
var myapp = angular.module("myapp",[]);
myapp.controller("mycontroller",function($scope){
$scope.hidden = 0;
$scope.ngVar = 1;
$scope.ngArray = [1, 2, 3, 4, 5, 6];
$scope.ngJSON = { "web": "swclass", "url": "swclass.com" };
});
</script>
</html>
Open HTML file in web browser.
Press F12 to open Developer Panel (Debugger Mode).
We can access AngularJS $scope in two ways.
Method 1: without jQuery selector
Right Click on any one HTML control (must have ng-model attribute) choose inspect.
Click on console from developer panel and type.
var s = angular.element($0).scope();
press enter.
Type s press enter.
You will get entire angular scope.
Method 2: with jQuery selector
Open HTML file in web browser.
Open inspect panel by press ctrl+shift+I and type.
var s = angular.element($('#ngcontrol')).scope();
press enter
type s press enter
You will get entire angular scope.
Now you can access angular variables as follows.
s.hidden;
s.ngVar;
s.ngArray;
s.ngJSON;
If you have any query or question or topic on which, we might have to write an article for your interest or any kind of suggestion regarding this post, Just feel free to write us, by hit add comment button below or contact via Contact Us form.
Your feedback and suggestions will be highly appreciated. Also try to leave comments from your valid verified email account, so that we can respond you quickly.