Как получить доступ к переменной $scope в консоли браузера с помощью AngularJS?
Я хотел бы получить доступ к моей $scope
переменная в консоли JavaScript Chrome. Как мне это сделать?
Я не вижу $scope
ни название моего модуля myapp
в консоли в качестве переменных.
17 ответов
выберите элемент в панели HTML инструментов разработчика и введите это в консоли:
angular.element().scope()
на WebKit и Firefox, - это ссылка на выбранный узел DOM на вкладке элементы, поэтому при этом вы получаете выбранную область узла DOM, распечатанную в консоли.
вы также можете нацелить область по идентификатору элемента, например:
angular.element(document.getElementById('yourElementId')).scope()
Аддоны/Расширения
есть некоторые очень полезные расширения Chrome, которые вы можете проверить:
бэтаранг. Это было вокруг в течение некоторого времени.
НГ-инспектор. Это новейший, и, как следует из названия, он позволяет вам проверять области вашего приложения.
игра с 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/
чтобы улучшить ответ 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
просто определите переменную JavaScript вне области и назначьте ее своей области в контроллере:
var myScope;
...
app.controller('myController', function ($scope,log) {
myScope = $scope;
...
вот именно! Он должен работать во всех браузерах (проверено по крайней мере в Chrome и Mozilla).
это работает, и я использую этот метод.