it-swarm.com.ru

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

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

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

1195
murtaza52

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

angular.element($0).scope()

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

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

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

Addons/Extensions

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

  • Batarang . Это было вокруг некоторое время.

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

Игра с jsFiddle

При работе с jsfiddle вы можете открыть скрипку в режиме show , добавив /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/

1700
jaime

Чтобы улучшить ответ 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();
180
Simon East

Если вы установили Батаранг

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

$scope

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

71
chrismarx

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

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

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

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

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

scope.$apply();
35
BraveNewMath

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

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
29
Mark Rajcok

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

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

10
Michael Blackburn

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

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

8
Dorian

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

5
James Drinkard

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

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

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

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

4
Mike

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

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

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

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

4
Sandeep

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

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

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

3
wojtekc

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

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

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

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

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

2
Praym

На консоли 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 enter image description here

0
Khachornchit Songsaen

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

angular.element().scope();

пример:

<div id=""></div>

0
Rizo

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

   window.scope = $scope;

  $scope.today = new Date();

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

enter image description here

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

0
mcvkr

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

0
Chris Halcrow