Получить элемент DOM по области $id

Я понимаю, что могу получить область по элементу:

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

Как получить обратное: найдите элемент DOM с помощью области $id, например 003?

Я хотел бы сделать это для целей отладки. В моем дереве областей отображается что-то, и я хотел бы определить, откуда оно взялось.

Ответы

Ответ 1

Хотя это не очень сексуально, каждый dom node получает класс ng-scope, поэтому вы можете сделать что-то вроде этого:

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;
}

Ответ 2

Попробовав ответ, я обнаружил, что директивы, похоже, не имеют класса ng-scope, поэтому здесь есть модифицированная версия, которая будет отбрасываться на все.

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);
}

Использование:

var results = getByScopeId('003')

Ответ 3

То же решение, написанное в es2015, без зависимости JQuery:

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

Ответ 4

Вы всегда можете получить область с помощью элемента id.

Пример:

HTML:

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

JS:

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

Пример в реальном времени: http://jsfiddle.net/choroshin/7XQA7/2/

также, как предложил Дэвид Чейз, вы всегда можете использовать batarang - Расширяет инструменты разработчика Chrome, добавляя инструменты для отладки и профилирования приложений AngularJS.