Як отримати доступ до змінної $ range в консолі браузера за допомогою AngularJS?

Я хотів би отримати доступ до своєї $scopeзмінної в консолі JavaScript Chrome. Як це зробити?

Я не можу бачити $scopeні назву свого модуля myappв консолі як змінної.

Виберіть елемент на панелі HTML інструментів розробника та введіть це в консолі:

angular.element($0).scope()

У WebKit і Firefox $0- це посилання на вибраний вузол DOM на вкладці елементів, тож цим ви отримуєте вибрану область DOM-вузла, роздруковану на консолі.

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

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

Доповнення / розширення

Існує кілька дуже корисних розширень для Chrome, які ви хочете перевірити:

• Батаранг . Це вже деякий час.

• ng-інспектор . Це найновіший варіант, і як випливає з назви, він дозволяє перевірити сферу застосування програми.

Гра з 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) - це натиснути на нього на вкладці "елементи", і він автоматично зберігається як $0.

angular.element($0).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();

Десь у вашому контролері (часто останній рядок є гарним місцем), поставте

console.log($scope);

Якщо ви хочете побачити внутрішню / неявну область, скажімо всередині ng-повтору, щось подібне спрацює.

<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

Одне застереження до багатьох з цих відповідей: якщо ви псевдонімом свого контролера, об'єкти сфери дії будуть знаходитись в об'єкті, що знаходиться у поверненому об'єкті scope().

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

Я погоджуюся, що найкраще - це Батаранг $scopeпісля вибору об'єкта (він такий же, як angular.element($0).scope()і навіть коротший, з jQuery: $($0).scope()(мій улюблений))

Крім того, якщо у мене, як у мене, у вас є головна сфера застосування bodyелемента, це $('body').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

Просто призначте $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();

Зазвичай я використовую для цього функцію jQuery data ():

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

На даний момент вибраний товар у хромовому інспекторі DOM. $ 1, $ 2 .. і так далі - це раніше вибрані елементи.

Скажіть, ви хочете отримати доступ до сфери застосування на зразок елемента

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

Ви можете використовувати наступне в консолі:

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

Це дасть вам змогу в цьому елементі.

На консолі 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

Для цього також потрібно встановити jQuery, але він ідеально підходить для середовища розробників. Він переглядає кожен елемент, щоб отримати екземпляри областей, а потім повертає їх, позначені іменами контролерів. Також видалення будь-якого властивості починається з $, що зазвичай використовується angularjs для його конфігурації.

let controllers = (extensive = false) => {
            let result = {};
            $('*').each((i, e) => {
                let scope = angular.element(e).scope();
                if(Object.prototype.toString.call(scope) === '[object Object]' && e.hasAttribute('ng-controller')) {
                    let slimScope = {};
                    for(let key in scope) {
                        if(key.indexOf('$') !== 0 && key !== 'constructor' || extensive) {
                            slimScope[key] = scope[key];
                        }
                    }
                    result[$(e).attr('ng-controller')] = slimScope;
                }
            });

            return result;
        }

в кутовій ми отримуємо елемент jquery за допомогою angular.element () .... дозволяє c ...

angular.element().scope();

приклад:

<div id=""></div>

Лише для налагодження я ставлю це до запуску контролера.

   window.scope = $scope;

  $scope.today = new Date();

І ось як я цим користуюся.

потім видаліть його, коли я закінчу налагодження.

Помістіть у вашому коді точку перерви десь близько до посилання на змінну $ range (щоб розмір $ знаходився в поточній області "звичайний старий JavaScript"). Тоді ви можете перевірити значення $ range в консолі.

Просто визначте змінну JavaScript за межами області та призначте її для вашої сфери дії у контролері:

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

Це воно! Він повинен працювати у всіх браузерах (перевірений принаймні в Chrome і Mozilla).

Це працює, і я використовую цей метод.