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

Я хотел бы получить доступ к моей переменной $scope в консоли Chrome JavaScript. Как это сделать?

Я не могу видеть $scope и имя моего модуля myapp в консоли как переменные.

1032
задан murtaza52 06 дек. '12 в 14:52
источник поделиться
15 ответов

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

angular.element($0).scope()

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

Вы также можете настроить таргетинг на область с помощью идентификатора элемента:

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

Addons/Extensions

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

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

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

Игра с jsFiddle

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

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/

1499
ответ дан jaime 06 дек. '12 в 15:56
источник поделиться

Чтобы улучшить ответ 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();
167
ответ дан Simon East 02 апр. '13 в 7:49
источник поделиться

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

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

$scope

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

67
ответ дан chrismarx 06 сент. '13 в 19:36
источник поделиться

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

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- suggestion также работает, , но я не думаю, что он работает внутри jsFiddle. Я получаю эту ошибку в jsFiddle внутри Chrome:

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

26
ответ дан Mark Rajcok 07 дек. '12 в 0:16
источник поделиться

Это способ получить масштаб без Batarang, вы можете сделать:

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

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

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

После внесения изменений в модель вам необходимо применить изменения к DOM, вызвав:

scope.$apply();
26
ответ дан BraveNewMath 04 июня '14 в 20:02
источник поделиться

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

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

9
ответ дан Michael Blackburn 24 февр. '15 в 7:00
источник поделиться

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

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

8
ответ дан Dorian 24 янв. '14 в 2:54
источник поделиться

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

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

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

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

3
ответ дан Sandeep 01 нояб. '16 в 19:26
источник поделиться

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

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

2
ответ дан Mike 14 дек. '16 в 0:16
источник поделиться

Чтобы добавить и улучшить другие ответы, в консоли введите $($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.

2
ответ дан James Drinkard 02 авг. '16 в 19:41
источник поделиться

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

s = $($0).scope()
// `s` is the scope object if it exists
2
ответ дан geg 07 дек. '15 в 18:54
источник поделиться

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

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

В настоящее время выбранный элемент $0 находится в хромовом инспекторе DOM. $ 1, $2.. и т.д. - ранее выбранные элементы.

2
ответ дан wojtekc 03 авг. '15 в 23:53
источник поделиться

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

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

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

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

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

1
ответ дан Praym 03 сент. '14 в 19:24
источник поделиться

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

0
ответ дан Chris Halcrow 18 мая '17 в 5:23
источник поделиться

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

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

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

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

-4
ответ дан Asqan 17 июня '15 в 11:52
источник поделиться

Другие вопросы по меткам или Задайте вопрос