Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I access the $scope variable in browser's console using AngularJS?

I would like to access my $scope variable in Chrome's JavaScript console. How do I do that?

I can neither see $scope nor the name of my module myapp in the console as variables.

like image 952
murtaza52 Avatar asked Dec 06 '12 11:12

murtaza52


People also ask

How do you access $scope in console?

To examine the scope in the debugger: 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. The debugger allows you to access the currently selected element in the console as $0 variable.

What is $scope in AngularJS?

$rootScope is a parent object of all “$scope” angular objects created in a webpage. $scope is a child object that is used to bind the HTML(view) & Javascript(Controller) in a webpage. It is created with the ng-app directive. It is created with the ng-controller directive.

What is variable in AngularJS?

Template Reference Variable in angular is used to access all the properties of any element inside DOM. It can also be a reference to an Angular component or directive or a web component.

What is the difference between $scope and scope in AngularJS?

In short, in case of dependency injection the scope object is received as $scope while in case of non-dependency injection scope object is received as scope or with any name. Save this answer.


2 Answers

To improve on jm's answer...

// Access whole scope angular.element(myDomElement).scope();  // Access and change variable in scope angular.element(myDomElement).scope().myVar = 5; angular.element(myDomElement).scope().myArray.push(newItem);  // Update page to reflect changed variables angular.element(myDomElement).scope().$apply(); 

Or if you're using jQuery, this does the same thing...

$('#elementId').scope(); $('#elementId').scope().$apply(); 

Another easy way to access a DOM element from the console (as jm mentioned) is to click on it in the 'elements' tab, and it automatically gets stored as $0.

angular.element($0).scope(); 
like image 34
Simon East Avatar answered Sep 23 '22 02:09

Simon East


Pick an element in the HTML panel of the developer tools and type this in the console:

angular.element($0).scope() 

In WebKit and Firefox, $0 is a reference to the selected DOM node in the elements tab, so by doing this you get the selected DOM node scope printed out in the console.

You can also target the scope by element ID, like so:

angular.element(document.getElementById('yourElementId')).scope() 

Addons/Extensions

There are some very useful Chrome extensions that you might want to check out:

  • Batarang. This has been around for a while.

  • ng-inspector. This is the newest one, and as the name suggests, it allows you to inspect your application's scopes.

Playing with jsFiddle

When working with jsfiddle you can open the fiddle in show mode by adding /show at the end of the URL. When running like this you have access to the angular global. You can try it here:

http://jsfiddle.net/jaimem/Yatbt/show

jQuery Lite

If you load jQuery before AngularJS, angular.element can be passed a jQuery selector. So you could inspect the scope of a controller with

angular.element('[ng-controller=ctrl]').scope() 

Of a button

 angular.element('button:eq(1)').scope() 

... and so on.

You might actually want to use a global function to make it easier:

window.SC = function(selector){     return angular.element(selector).scope(); }; 

Now you could do this

SC('button:eq(10)') SC('button:eq(10)').row   // -> value of scope.row 

Check here: http://jsfiddle.net/jaimem/DvRaR/1/show/

like image 148
jaime Avatar answered Sep 21 '22 02:09

jaime