Get DOM element by scope $id

Question

I understand I can get the scope by element:

scope = angular.element($0).scope();
scope.$id; // \"003\"

How do I get reverse: Find the DOM

Answer 1

Although it's not very sexy each dom node gets a class ng-scope so you could tech do something like this maybe:

function getScope(id) {
var elem;
$('.ng-scope').each(function(){
    var s = angular.element(this).scope(),
        sid = s.$id;

    if(sid == id) {
        elem = this;
        return false; // stop looking at the rest
    }
});
return elem;
}

Answer 2

Trying out the answer, I found that directives don't seem to have the class ng-scope, so here's a modified version that'll fallback to everything.

var getByScopeId = function(id) { 
    var filterfn = function(i,el) {
        var sc = angular.element(el).scope();

        return sc && sc.$id == id;
    };
    // low hanging fruit -- actual scope containers
    var result = $('.ng-scope').filter(filterfn);
    if(result && result.length) return result;

    // try again on everything...ugh
    return $(':not(.ng-scope)').filter(filterfn);
}

Usage:

var results = getByScopeId('003')

Answer 3

You can always get the scope using element's id.

Example:

html:

<div id="myId"></div>

js:

  var myEl = angular.element(document.querySelector('#myId'));
  var myScope = angular.element(myEl).scope(); 

Live example : http://jsfiddle.net/choroshin/7XQA7/2/

also as David Chase suggested, you can always use batarang - Extends Chrome Developer Tools, adding tools for debugging and profiling AngularJS applications.

Answer 4

The same solution written in es2015, without JQuery dependency:

getElementFromScopeId = (id) => [].slice.call(document.querySelectorAll('.ng-scope')).map((x) => angular.element(x)).filter(x => x.scope().$id == id).pop();