Why my scope is undefined?

Question

I have the following html:

enter image description here

I am trying to get the scope like:

console.log("app element scope: " + $('#angularHeaderDiv').scope());

but I received: undefined.

I am angularJS beginner and I simply dont' get why this doesn't work.

UPDATE: This doesn't work either:

var appElement = document.getElementById('angularHeaderDiv');
console.log("app element scope: " + angular.element(appElement).scope());

UPDATE 2: All the code where I try to print out the scope in console:

 angular.module('cmApp', [ 'pascalprecht.translate' ])
.config(function($translateProvider) {
 $translateProvider.useStaticFilesLoader({
 prefix : '/resources/angular/scripts/languages/locale-',
 suffix : '.json'
 });
 // add translation table
 $translateProvider.preferredLanguage('en');
 var appElement = document.getElementById('angularHeaderDiv');
 console.log("app element: " + angular.element(appElement).scope());
});

• Mike Robinson: Hard to say without seeing the javascript.
• Explosion Pills: What are you trying to do? I don't see why a jQuery collection would have a method .scope because you were including Angular
• Patsy Issa: possible duplicate of How to access the angular $scope variable in browser's console?
• Cristian Boariu: @ExplosionPills Tried without jquery and received the same (updated the question).
• Adjit: Angular has no function called .scope() @RafaelEyng is right, do you mean $scope? Take a look here: docs.angularjs.org/guide/scope Or did you create you're own scope method? The reason .scope() is undefined is because it doesn't exist

Answer 1

If you have this in your code:

$compileProvider.debugInfoEnabled(false);

...then scope() and isolateScope() will return undefined. If it's set to false, you'll notice other things like ng-scope and ng-isolate-scope disappearing out of class= attributes on elements.

See: https://code.angularjs.org/1.3.16/docs/guide/production#disabling-debug-data

• user725844: Thanks so much! Now I need to find another way to extract scope from an element inside my focus manager directive
• Nathan Reese: How would you get scope when debugInfoEnabled is set to false? Are there any other ways to obtain a scope for a element?

Answer 2

I don't think you actually have a scope there. Assuming you meant $scope, it is a environment that is shared between a controller and a portion of your DOM, and it is injected inside of your controller by AngularJS dependency injection mechanism. Besides that, I don't see any association between your '#angularHeaderDiv' and any scope, since this div is not even associated with any controller.

I'm also not very experienced with AngularJS, but actually I've never seen what you are trying to accomplish here.

Edit

Having seen your edit, where you are trying to access the DOM element inside a config, I would say that that is for sure a non-AngularJS way to solve your problem. I suggest you to read more about the framework.

• Cristian Boariu: What I want is to get the rootScope and I was thinking that inside the ng-app this should be available...
• Rafael Eyng: As I've said, $scope is an environment shared between the controller and the associated portion of the DOM. You can, yes, have nested scopes, with nested controllers inside your DOM.
• Cristian Boariu: Ok but then this should work: var appElement = document.getElementById('main'); console.log("app element: " + angular.element(appElement).scope()); because main is already having HeaderCtrl bound to it but this doesn't work either.
• Rafael Eyng: Point is: you don't have access to your $scope (with the dollar) outside your controller. And, inside your controller, I don't see the need to access DOM elements like you are doing. It seems that you are taking a jQuery-ish approach to a AngularJS problem.
• ivarni: It's perfectly possible to access a controller's scope from outside the controller. It is not just a parameter. This is the common way to hook into the angular lifecycle from 3rd party plugins. docs.angularjs.org/api/ng/function/…. As you point out though, the OP won't be able to do this from the context of the config function, so at least that part is correct.

Answer 3

If your application has debugInfoEnabled(false), you could try to reload the app with debug info:

angular.reloadWithDebugInfo()

See here: https://docs.angularjs.org/guide/production#disabling-debug-data