Я хотел бы получить доступ к моей переменной $scope
в консоли Chrome JavaScript. Как это сделать?
Я не могу видеть $scope
и имя моего модуля myapp
в консоли как переменные.
Выберите элемент на панели 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/
angular.element($0).scope()
, он работает до тех пор, пока вы не попытаетесь вызвать некоторые методы. Я пытался, и по какой-то причине никакие HTTP-запросы не возможны в этой настройке?
Чтобы улучшить ответ 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();
angular.element(document.body).scope()
, спасибо!
Если вы установили Batarang
Тогда вы можете просто написать:
$scope
когда у вас есть элемент, выбранный в представлении элементов в хроме. 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();
angular.element
уже является методом выбора элемента. Перестаньте говорить, что вам нужен jQuery для простых задач, таких как выбор элемента по его идентификатору!
Где-то в вашем контроллере (часто последняя строка - хорошее место), поставьте
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
Остерегайтесь многих из этих ответов: если вы используете свой контроллер, объекты области видимости будут находиться в объекте в возвращаемом объекте из scope()
.
Например, если ваша директива контроллера создается так:
<div ng-controller="FormController as frm">
затем для доступа к свойству startDate
вашего контроллера вы вызываете angular.element($0).scope().frm.startDate
$scope
, названный $ctrl
по умолчанию, независимо от переименовывать ли с помощью controllerAs
или нет. Я не понимаю, где вы видели «предостережение» в существующих ответах. Обратите внимание, что большинство ответов здесь были предоставлены еще тогда, когда controllerAs
не было обычной практикой.
controllerAs
не был обычной практикой, поэтому он вводил в заблуждение новичков, которые, возможно, следовали «кулинарной книге», в которой говорилось, что псевдоним контроллера, но затем не видит свойства без использования псевдонима. Все шло быстро два года назад.
Я согласен, что лучше всего Batarang с ним $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, но добавив его в качестве подходящего ответа на этот вопрос.
Я использовал angular.element($(".ng-scope")).scope();
в прошлом, и он отлично работает. Только хорошо, если на странице есть только одна область приложения, или вы можете сделать что-то вроде:
angular.element($("div[ng-controller=controllerName]")).scope();
или angular.element(document.getElementsByClassName("ng-scope")).scope();
Чтобы добавить и улучшить другие ответы, в консоли введите $($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.
Осмотрите элемент, затем используйте его в консоли
s = $($0).scope()
// `s` is the scope object if it exists
Я обычно использую функцию jQuery data() для этого:
$($0).data().$scope
В настоящее время выбранный элемент $0 находится в хромовом инспекторе DOM. $ 1, $2.. и т.д. - ранее выбранные элементы.
Предположим, вы хотите получить доступ к объему элемента, например
<div ng-controller="hw"></div>
В консоли можно использовать следующее:
angular.element(document.querySelector('[ng-controller=hw]')).scope();
Это даст вам область действия этого элемента.
Поместите контрольную точку в свой код где-нибудь рядом с ссылкой на переменную $scope (так что область $находится в текущей области "простой старый JavaScript" ). Затем вы можете проверить значение $scope в консоли.
Просто определите переменную JavaScript вне области действия и назначьте ее своей области в контроллере:
var myScope;
...
app.controller('myController', function ($scope,log) {
myScope = $scope;
...
Что это! Он должен работать во всех браузерах (проверяется, по крайней мере, в Chrome и Mozilla).
Он работает, и я использую этот метод.
window.MY_SCOPE = $scope;
первым делом в моей функции контроллера.$scope
из выбранных элементов DOM в DOM Inspector Firebug.