CODEWITHSUNDEEP
javascriptangularjsscope
Naveen
Naveen

Reputation: 55

$scope not working on console

AngularJS Developer Guides on scope says that we can examine the scope by typing $scope on console.

To examine the scope in the debugger:

1.Right click on the element of interest in your browser and select 'inspect element'. You should see the browser debugger with the element you clicked on highlighted.

2.The debugger allows you to access the currently selected element in the console as $0 variable.

3.To retrieve the associated scope in console execute: angular.element($0).scope() or just type $scope

But when I'm typing $scope on console it says

Uncaught ReferenceError: $scope is not defined at :1:1

Here is the link for reference.

app.js look like this

var app=angular.module("app",[]);
app.controller("ctrl",['$scope','demoservice',function($scope,demoservice){
  console.log(demoservice);
  $scope.ser=demoservice;
}]);

app.service("demoservice",[function (){
  this.name="Himanshu";
}]);

Someone is asking for code so here is CodePen on which same error is coming.

Upvotes: 2

Views: 3945

Answers (2)

Vinod Louis
Vinod Louis

Reputation: 4876

$scope is a reference variable inside controller hence writing $scope on console will not provide an access as its not a global variable but private to a scope. So if you need to access $scope variable you need to access it in certain execution scope consider the following example

enter image description here

A breakpoint has been kept in the middle of execution content, so here now as $scope is in memory we can use it in console like this

enter image description here

So in order to inspect $scope you have to be in middle of execution perhaps not just to $scope but this applies for any js code variable unless its global cannot be accessed in window console.

other than that to use more friendly angular JS debugging you can also use angular batarang an add on to chrome

Upvotes: 1

Punith Mithra
Punith Mithra

Reputation: 628

Pick an element from the HTML and in the console tab execute angular.element($0).scope(); this the statement you will get the scope of that element.

or

You can install in-inspect chrome plugin. and use $s in the console to get the scope of the element.

Upvotes: 1

Related Questions