Как мне получить доступ к переменной $ scope в консоли браузера с помощью AngularJS?

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

angular.element($0).scope()

В WebKit и Firefox $0 - это ссылка на выбранный узел DOM на вкладке элементов, поэтому сделав это, вы получите выбранную область видимости узла DOM, распечатанную в консоли.

Вы также можете настроить таргетинг на область действия по идентификатору элемента, например:

angular.element(document.getElementById('yourElementId')).scope()

Дополнения / расширения

Есть несколько очень полезных расширений Chrome, которые вы, возможно, захотите попробовать:

• Батаранг. Это было какое-то время.

• ng-Inspector. Это самый новый, и, как следует из названия, он позволяет вам проверять области действия вашего приложения.

Игра с jsFiddle

При работе с jsfiddle вы можете открыть скрипт в режиме show, добавив /show в конце URL-адреса. При таком запуске у вас есть доступ к angular global. Вы можете попробовать это здесь:

http://jsfiddle.net/jaimem/Yatbt/show

jQuery Lite

Если вы загрузите jQuery до AngularJS, angular.element можно передать селектор jQuery. Таким образом, вы можете проверить объем контроллера с помощью

angular.element('[ng-controller=ctrl]').scope()

Кнопки

 angular.element('button:eq(1)').scope()

... и так далее.

Возможно, вы действительно захотите использовать глобальную функцию, чтобы упростить задачу:

window.SC = function(selector){
    return angular.element(selector).scope();
};

Теперь ты мог это сделать

SC('button:eq(10)')
SC('button:eq(10)').row   // -> value of scope.row

Проверьте здесь: http://jsfiddle.net/jaimem/DvRaR/1/show/

Чтобы улучшить ответ jm ...

// Access whole scope
angular.element(myDomElement).scope();

// Access and change variable in scope
angular.element(myDomElement).scope().myVar = 5;
angular.element(myDomElement).scope().myArray.push(newItem);

// Update page to reflect changed variables
angular.element(myDomElement).scope().$apply();

Или, если вы используете jQuery, то же самое ...

$('#elementId').scope();
$('#elementId').scope().$apply();

Еще один простой способ получить доступ к элементу DOM из консоли (как упоминалось в jm) - щелкнуть по нему на вкладке «элементы», и он автоматически сохраняется как $0.

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

Если вы установили Batarang

Тогда вы можете просто написать:

$scope

когда у вас есть элемент, выбранный в представлении элементов в хроме. Ссылка - https://github.com/angular/angularjs-batarang#console

Это способ получить объем без Батаранга, вы можете:

var scope = angular.element('#selectorId').scope();

Или, если вы хотите найти свою область действия по имени контроллера, сделайте следующее:

var scope = angular.element('[ng-controller=myController]').scope();

После того, как вы внесете изменения в свою модель, вам нужно будет применить изменения к DOM, вызвав:

scope.$apply();

Где-нибудь в вашем контроллере (часто последняя строка - хорошее место), поместите

console.log($scope);

Если вы хотите увидеть внутреннюю / неявную область видимости, скажем, внутри ng-repeat, что-то вроде этого будет работать.

<li ng-repeat="item in items">
   ...
   <a ng-click="showScope($event)">show scope</a>
</li>

Затем в вашем контроллере

function MyCtrl($scope) {
    ...
    $scope.showScope = function(e) {
        console.log(angular.element(e.srcElement).scope());
    }
}

Обратите внимание, что выше мы определяем функцию showScope () в родительской области, но это нормально ... дочерняя / внутренняя / неявная область может получить доступ к этой функции, которая затем распечатывает область на основе события и, следовательно, область, связанную с элемент, вызвавший событие.

Предложение @ jm- тоже работает, , но я не думаю, что оно работает внутри jsFiddle. Я получаю эту ошибку в jsFiddle внутри Chrome:

> angular.element($0).scope()
ReferenceError: angular is not defined

Одно предостережение ко многим из этих ответов: если вы укажете псевдоним для своего контроллера, ваши объекты области будут в объекте в объекте, возвращаемом из scope().

Например, если ваша директива контроллера создана так: <div ng-controller="FormController as frm">, тогда для доступа к свойству startDate вашего контроллера вы должны вызвать angular.element($0).scope().frm.startDate

Чтобы добавить и улучшить другие ответы, в консоли введите $($0), чтобы получить элемент. Если это приложение Angularjs, по умолчанию загружается версия jQuery lite.

Если вы не используете jQuery, вы можете использовать angular.element ($ 0), как в:

angular.element($0).scope()

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

$.fn.jquery

Если вы проверили элемент, текущий выбранный элемент доступен через ссылку API командной строки $ 0. Эта ссылка есть как в Firebug, так и в Chrome.

Однако инструменты разработчика Chrome сделают доступными последние пять элементов (или объектов кучи), выбранных с помощью свойств с именами $ 0, $ 1, $ 2, $ 3, $ 4, используя эти ссылки. На последний выбранный элемент или объект можно ссылаться как на $ 0, на второй по времени - как на $ 1 и так далее.

Вот справочник по API командной строки для Firebug, в котором перечислены ссылки.

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

Вот некоторые другие вещи, которые вы можете использовать:

• Просмотр родительской области элементов:

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

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

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

• Вы можете посмотреть на корневую область:

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

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

$($0).isolateScope()

См. Советы и рекомендации по отладке незнакомого кода Angularjs для получения более подробной информации и примеров.

Я согласен, что лучше всего подходит Батаранг с $scope после выбора объекта (он такой же, как angular.element($0).scope(), или даже короче с jQuery: $($0).scope() (мой любимый))

Кроме того, если, как и я, у вас есть основная область видимости на элементе body, $('body').scope() отлично работает.

Просто назначьте $scope в качестве глобальной переменной. Задача решена.

app.controller('myCtrl', ['$scope', '$http', function($scope, $http) {
    window.$scope = $scope;
}

На самом деле нам нужно $scope чаще в разработке, чем в производстве.

Уже упоминалось @JasonGoemaat, но добавляло его как подходящий ответ на этот вопрос.

Осмотрите элемент, затем используйте его в консоли.

s = $($0).scope()
// `s` is the scope object if it exists

Я использовал angular.element($(".ng-scope")).scope(); в прошлом, и он отлично работает. Хорошо, только если у вас есть только одна область приложения на странице или вы можете сделать что-то вроде:

angular.element($("div[ng-controller=controllerName]")).scope(); or angular.element(document.getElementsByClassName("ng-scope")).scope();

Я обычно использую для этого функцию jQuery data ():

$($0).data().$scope

$ 0 - это текущий выбранный элемент в инспекторе Chrome DOM. $ 1, $ 2 и т. Д. Являются ранее выбранными элементами.

Скажем, вы хотите получить доступ к области действия элемента, например

<div ng-controller="hw"></div>

Вы можете использовать в консоли следующее:

angular.element(document.querySelector('[ng-controller=hw]')).scope();

Это даст вам область видимости для этого элемента.

На консоли Chrome:

 1. Select the **Elements** tab
 2. Select the element of your angular's scope. For instance, click on an element <ui-view>, or <div>, or etc.
 3. Type the command **angular.element($0).scope()** with following variable in the angular's scope

Пример

angular.element($0).scope().a
angular.element($0).scope().b

Консоль Chrome

Для этого также необходимо установить jQuery, но он отлично работает в среде разработки. Он просматривает каждый элемент, чтобы получить экземпляры областей видимости, а затем возвращает их, помеченные именами контроллеров. Он также удаляет любое свойство, начинающееся с $, которое обычно использует angularjs для своей конфигурации.

let controllers = (extensive = false) => {
            let result = {};
            $('*').each((i, e) => {
                let scope = angular.element(e).scope();
                if(Object.prototype.toString.call(scope) === '[object Object]' && e.hasAttribute('ng-controller')) {
                    let slimScope = {};
                    for(let key in scope) {
                        if(key.indexOf('$') !== 0 && key !== 'constructor' || extensive) {
                            slimScope[key] = scope[key];
                        }
                    }
                    result[$(e).attr('ng-controller')] = slimScope;
                }
            });

            return result;
        }

в angular мы получаем элемент jquery с помощью angular.element () .... позволяет c ...

angular.element().scope();

пример:

<div id=""></div>

Только для целей отладки я помещаю это в начало контроллера.

   window.scope = $scope;

  $scope.today = new Date();

И вот как я его использую.

затем удалите его, когда я закончу отладку.

Поместите точку останова в свой код где-нибудь рядом со ссылкой на переменную $ scope (так, чтобы $ scope находилась в текущей области "простого старого JavaScript"). Затем вы можете проверить значение $ scope в консоли.

Просто определите переменную JavaScript вне области видимости и назначьте ее своей области действия в контроллере:

var myScope;
...
app.controller('myController', function ($scope,log) {
     myScope = $scope;
     ...

Вот и все! Он должен работать во всех браузерах (проверено как минимум в Chrome и Mozilla).

Он работает, и я использую этот метод.