0

I've done a couple projects in the past that use AngularJS. In development, I was always able to call $scope in the browser console and thus all of its variables. For example, $scope.myArray would return something like [] or [object1, object2].

However, now when I type in $scope, I get:

Uncaught ReferenceError: $scope is not defined

I've also looked at other posts like How to access the $scope variable in browser's console using AngularJS?, and it is suggested to use angular.element($0).scope(), but when I type that in the console, I get:

undefined

and I can't access objects like myArray even though I know it is being created. Does anyone know what changed?

EDIT: I'm running into this problem also when I try code from previous projects that I were once able to access $scope for, so that makes me think it's not a simple implementation error.

reubonwry
  • 317
  • 4
  • 15
  • Check this https://docs.angularjs.org/guide/production#disabling-debug-data – Estus Flask Nov 17 '15 at 02:29
  • it still works with dependency injection, any place that's in-play – dandavis Nov 17 '15 at 02:46
  • It's likely that `$0` does not refer to the proper element. Find a selector for your element (e.g. by inspecting the element, right clicking on it in the "Elements" panel, and clicking "Get CSS path"), and doing `angular.element(theCssPath).scope()`. – Robert Balicki Nov 17 '15 at 02:52
  • I use AngularJS Batarang in chrome, this enables me to type `$scope` in the console. Did you not perhaps also use this extension, and accidentally forgotten about the extension after uninstalling it? – Tjaart van der Walt Nov 17 '15 at 09:36
  • @TjaartvanderWalt Thanks for suggesting Batarang. This will help me with debugging, even though I would still like to have my old ability to just call `$scope` from within the console. – reubonwry Nov 17 '15 at 18:25
  • @Reuben using Batarang(or any other chrome extension) is the only way I know of accessing `$scope` in the console. Please see this SO question http://stackoverflow.com/questions/13743058/how-to-access-the-scope-variable-in-browsers-console-using-angularjs – Tjaart van der Walt Nov 18 '15 at 05:44

2 Answers2

0

$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 must get the element first. Or you can just get the specified scope. ex:

angular.element('‪#‎element‬').scope();

or

angular.element(document.getElementsByTagName("button")[0]).scope()

https://jsfiddle.net/fatb8g3z/

augustine
  • 538
  • 4
  • 15
  • I still was not able to get this to work. I typed in `angular.element("button").scope();` and got this: `Uncaught Error: [jqLite:nosel] http://errors.angularjs.org/1.3.14/jqLite/nosel` – reubonwry Nov 17 '15 at 19:39
  • That's jqLite's problem. Try this. angular.element(document.getElementsByTagName("button")[0]).scope() – augustine Nov 18 '15 at 10:10
0

Within the definition of the controller put window.myScope = $scope. Then in the console you can call myScope.myArray to have things returned to you.

For example:

var app = angular.module('myApp', [])

app.controller('myCtrl', function($scope) {
window.myScope = $scope; //this allows console access

$scope.myArray = [];
//more code here
});
reubonwry
  • 317
  • 4
  • 15