Use angular.element to get scope object by $ID

Question

I need to pass data from an angular app to scripts that run outside of angular because I do not have access to editing the code of the angular app.

Using Angular Batarang and NG-Inspector extensions for Chrome, I can see the JSON object I need to pull from, but I am at a loss of how to start.

For instance, in Angular Batarang, the object looks like:

$id=5
name: "listing"
keys:
   0: "alpha"
   1: "beta"
alpha:
   user: "test"
   userID: "12345"
beta: 
   address: "555 Elm St"
   phone: [phone]

My initial thought was I could grab it using angular.element but I haven't had any successes.

Solution

you can determine which element that scope is bound to, select the element, and grab it's scope via angular.element. Assume this scope is attached to element <div id="stuff"></div>, observe the following example, specifically, the call to .scope()

<div ng-app="app" ng-controller="ctrl" id="stuff"></div>

<button onclick="getStuff()">get stuff</button>

---

var app = angular.module('app', []).controller('ctrl', function($scope) {
   $scope.inside = { 'name': 'guy', 'idk': 'blah' }
});

var getStuff = function() {
    var outside = angular.element(document.getElementById('stuff')).scope();
    console.log(outside.inside) // retrieved "outside" of AngularJS
}

JSFiddle Example - demo

---

Update

Per the docs, debug mode must be enabled.

scope() - retrieves the scope of the current element or its parent. Requires Debug Data to be enabled.

It's enabled by default, and disabling it will cause issue here

Comments

[TheIntrepidSpiff]

You are awesome. That worked perfectly...my problem was that there were custom elements, so instead of getElementById, I went to querySelectorAll and found the element that had the scope object I was looking for. Thank you for the help!

[djabraham]

I believe the scope() method doesn't work, when running Angular in production mode. This is a bit of a pitfall because it works well, up until it's deployed.

[scniro]

@djabraham production mode? Can you explain a little more what you mean?

[djabraham]

I wouldn't make an app dependent on scope(), because it's not there when debug data is disabled. You can enable debug data on a deployed app in real-time, in order to debug issues. But leaving debug data on by default would hurt performance, so apps are typically deployed without this feature enabled. docs.angularjs.org/guide/production

[scniro]

I don't see anything in there about .scope() not working. If anything, it reminds you that it does work > These scope references can then be accessed via element.scope()

[mramosch]

I simply would like to change the color of an HTML text element (that I have assigned an ID to) from an ng-click="???" - It works correctly from <script>getElement etc.</script> - but I am not able to trigger a color change via ng-click. Nor am I able to trigger the working <script> from ng-click...