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

чтобы улучшить ответ 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) - щелкнуть по нему на вкладке "элементы", и он автоматически сохраняется как .

angular.element().scope();

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

затем вы можете просто написать:

$scope

если элемент выбран в представлении элементы в chrome. Ref -https://github.com/angular/angularjs-batarang#console

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

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().scope()
ReferenceError: angular is not defined

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

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

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

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

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

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

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

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

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

$().data().$scope

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

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

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

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

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

angular.element().scope()

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

$.fn.jquery

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

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

здесь ссылка API командной строки для Firebug в этом списке это ссылки на литературу.

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

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

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

$().scope().$parent.

• вы можете приковать это тоже:

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

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

$().scope().$root

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

$().isolateScope()

посмотреть советы и рекомендации по отладке незнакомого кода Angularjs для больше деталей и примеров.

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

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

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

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

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

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

это даст вам объем в этом элементе.

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

в angular мы получаем элемент jquery по angular.элемент.)(... было бы классно...

angular.element().scope();

пример:

<div id=""></div>

на консоли 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().scope()** with following variable in the angular's scope

пример

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

консоль Chrome

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

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

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

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