В AngularJS, как вы находите все области на странице?

Ответ 1

вы можете видеть все области на странице с помощью этого селектора CSS

.ng-scope { border: 1px solid red; }

и все привязки:

.ng-binding { border: 1px solid red; }

Затем вы можете получить их путем преобразования элемента DOM в селектор

var selector = angular.element(some_dom_element);

Затем используйте селектор для извлечения области/контроллера/инжектора

var scope = selector.scope();
var controller = selector.controller();
var injector = selector.injector();

Ответ 2

Не все области привязаны к элементам. Если вам нужна область all на странице, пройдите по дереву областей следующим образом:

function getScopes(root) {
    var scopes = [];

    function visit(scope) {
        scopes.push(scope);
    }
    function traverse(scope) {
        visit(scope);
        if (scope.$$nextSibling)
            traverse(scope.$$nextSibling);
        if (scope.$$childHead)
            traverse(scope.$$childHead);
    }

    traverse(root);
    return scopes;
}

getScopes($rootScope)

Ответ 3

Я не знаю, почему это было бы полезно для вас, но вы можете это сделать:

scopeElements = document.getElementsByClassName('ng-scope');
scopes = [].map.call(scopeElements, function(e){ return angular.element(e).scope(); })

Другим вариантом является перемещение дерева области видимости, начиная с области корня, используя наш частный apis: $$ childHead и $$ nextSibling.

Скорее всего, вы просто хотите увидеть, где находятся границы области видимости, и вы можете сделать это с помощью этого:

scopeElements = document.getElementsByClassName('ng-scope');
angular.element(scopeElements).css('border', '1px solid red');

Затем вы можете просто использовать веб-инспектор, чтобы выбрать интересующий элемент и получить его область действия:

angular.element($0).scope();

Ответ 4

Я рекомендую AngularJS Batarang. Это инструмент для отладки, который позволяет визуализировать все области на странице (между прочим).

https://github.com/angular/angularjs-batarang

Ответ 5

Вы можете узнать область применения элемента:

$(element).scope()

или

angular.element(element).scope()

Я не думаю, что есть способ легко получить все области на странице (кроме навигации по корневой области).

Ответ 6

Вам необходимо разработать приложение в браузере Google Chrome (если вы его еще не используете), и вы можете использовать удивительное расширение Batarang, которое добавляет новую специальную панель AngularJS к инструментам разработчика. Вы можете видеть все области там, каковы отношения между ними и какое значение имеют все его атрибуты.

http://blog.angularjs.org/2012/07/introducing-angularjs-batarang.html

Ответ 7

В углах есть $rootScope, который является корнем каждой области. У него дочернее поле, а целая иерархия находится внутри $rootScope. Если вы хотите найти область с элементом html, у вас, вероятно, будут проблемы, потому что эта область может быть Изолированной областью. Возможно, у вас есть директива, какая область выделена. Если у вас есть что-то подобное, попробуйте использовать el.isolatedScope()

Ответ 8

В Chrome, используя инструменты разработчика. Я использую консольную командную строку.

Выберите элемент на панели HTML инструментов разработчика и введите его в консоли:

angular.element($0).scope()

или просто щелкните правой кнопкой мыши элемент страницы и выберите: проверить элемент.

$($0).scope() вернет область, связанную с элементом. Вы можете сразу увидеть его свойства.

Чтобы просмотреть родительскую область элементов:

$($0).scope().$parent

Вы также можете связать это:

$($0).scope().$parent.$parent

Вы можете посмотреть область корня:

$($0).scope().$root

Если вы выделили директиву с областью выделения, вы можете посмотреть на нее с помощью

$($0).isolateScope()

Если доступно, вы можете сделать то же самое с дочерней областью и областью для брака.

$($0).scope().$sibling

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

Недавно у меня было два контроллера с тем же именем, за исключением одной заглавной буквы, прикрепленной к представлению. Я использовал неправильный контроллер, и мне потребовалось некоторое время, прежде чем я понял, что это проблема с моими привязками.