Jak uzyskać dostęp do zmiennej $ scope w konsoli przeglądarki za pomocą AngularJS?

Chciałbym uzyskać dostęp do mojej $scopezmiennej w konsoli JavaScript Chrome. Jak mogę to zrobić?

Nie widzę $scopeani nazwy mojego modułu myappw konsoli jako zmiennych.

Wybierz element w panelu HTML narzędzi programistycznych i wpisz go w konsoli:

angular.element($0).scope()

W WebKit i Firefox $0jest odniesieniem do wybranego węzła DOM na karcie elementów, więc w ten sposób otrzymujesz wybrany zakres węzła DOM wydrukowany w konsoli.

Możesz także celować w zakres według identyfikatora elementu, na przykład:

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

Dodatki / rozszerzenia

Istnieje kilka bardzo przydatnych rozszerzeń Chrome, które możesz chcieć sprawdzić:

• Batarang . To już od jakiegoś czasu.

• inspektor ng . Jest to najnowszy i, jak sama nazwa wskazuje, umożliwia sprawdzenie zakresów aplikacji.

Gra z jsFiddle

Podczas pracy z jsfiddle możesz otworzyć skrzypce w trybie pokazu , dodając /showna końcu adresu URL. Podczas takiego działania masz dostęp do angularglobalnego. Możesz spróbować tutaj:

http://jsfiddle.net/jaimem/Yatbt/show

jQuery Lite

Jeśli załadujesz jQuery przed AngularJS, angular.elementmożesz przekazać selektor jQuery. Abyś mógł sprawdzić zakres kontrolera za pomocą

angular.element('[ng-controller=ctrl]').scope()

Przycisku

 angular.element('button:eq(1)').scope()

... i tak dalej.

Możesz faktycznie użyć funkcji globalnej, aby ułatwić:

window.SC = function(selector){
    return angular.element(selector).scope();
};

Teraz możesz to zrobić

SC('button:eq(10)')
SC('button:eq(10)').row   // -> value of scope.row

Sprawdź tutaj: http://jsfiddle.net/jaimem/DvRaR/1/show/

Aby poprawić odpowiedź 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();

Lub jeśli używasz jQuery, robi to samo ...

$('#elementId').scope();
$('#elementId').scope().$apply();

Innym łatwym sposobem na uzyskanie dostępu do elementu DOM z konsoli (jak wspomniano w jm) jest kliknięcie go w zakładce „elementy” i automatycznie zostanie on zapisany jako $0.

angular.element($0).scope();

Jeśli masz zainstalowany Batarang

Następnie możesz po prostu napisać:

$scope

kiedy masz wybrany element w widoku elementów w chrome. Ref - https://github.com/angular/angularjs-batarang#console

Jest to sposób na uzyskanie zasięgu bez Bataranga, możesz:

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

Lub jeśli chcesz znaleźć zakres według nazwy kontrolera, wykonaj następujące czynności:

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

Po wprowadzeniu zmian w modelu należy zastosować zmiany w modelu DOM, wywołując:

scope.$apply();

Gdzieś w twoim kontrolerze (często ostatnia linia to dobre miejsce)

console.log($scope);

Jeśli chcesz zobaczyć zakres wewnętrzny / niejawny, powiedzmy w powtórzeniu ng, coś takiego będzie działać.

<li ng-repeat="item in items">
   ...
   <a ng-click="showScope($event)">show scope</a>
</li>

Następnie w kontrolerze

function MyCtrl($scope) {
    ...
    $scope.showScope = function(e) {
        console.log(angular.element(e.srcElement).scope());
    }
}

Zauważ, że powyżej definiujemy funkcję showScope () w zakresie nadrzędnym, ale to dobrze ... zakres potomny / wewnętrzny / niejawny może uzyskać dostęp do tej funkcji, która następnie drukuje zakres na podstawie zdarzenia, a zatem zakres związany z element, który uruchomił zdarzenie.

Sugestia @ jm-także działa, ale nie sądzę, że działa w jsFiddle. Ten błąd pojawia się w jsFiddle w Chrome:

> angular.element($0).scope()
ReferenceError: angular is not defined

Jedno zastrzeżenie do wielu z tych odpowiedzi: jeśli użyjesz aliasu kontrolera, twoje obiekty zakresu będą w obiekcie w zwróconym obiekcie z scope() .

Na przykład, jeśli twoja dyrektywa kontrolera jest tworzona w taki sposób: <div ng-controller="FormController as frm"> to aby uzyskać dostęp do startDatewłaściwości kontrolera, zadzwoniszangular.element($0).scope().frm.startDate

Zgadzam się, że najlepszy jest Batarang z nim $scopepo wybraniu obiektu (jest taki sam angular.element($0).scope()lub nawet krótszy z jQuery: $($0).scope()(mój ulubiony))

Ponadto, jeśli tak jak ja, masz główny zakres na bodyelemencie, $('body').scope()działa dobrze.

Aby dodać i ulepszyć inne odpowiedzi, w konsoli wprowadź, $($0)aby uzyskać element. Jeśli jest to aplikacja Angularjs, domyślnie ładowana jest wersja jQuery lite.

Jeśli nie używasz jQuery, możesz użyć angular.element (0 $) jak w:

angular.element($0).scope()

Aby sprawdzić, czy masz jQuery i wersję, uruchom to polecenie w konsoli:

$.fn.jquery

Jeśli sprawdziłeś element, aktualnie wybrany element jest dostępny za pośrednictwem interfejsu API w wierszu poleceń nr 0. Zarówno Firebug, jak i Chrome mają to odniesienie.

Jednak narzędzia programistyczne Chrome udostępnią pięć ostatnich elementów (lub obiektów sterty) wybranych za pomocą tych właściwości o nazwach 0, 1, 2, 3, 4 USD. Ostatnio wybrany element lub obiekt może być oznaczony jako 0 USD, drugi jako 1 USD i tak dalej.

Oto odniesienie interfejsu API wiersza polecenia dla Firebug, które zawiera listę odniesień.

$($0).scope()zwróci zakres powiązany z elementem. Możesz zobaczyć jego właściwości od razu.

Niektóre inne rzeczy, których możesz użyć to:

• Wyświetl zakres nadrzędny elementów:

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

• Możesz to również połączyć:

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

• Możesz spojrzeć na zakres główny:

$($0).scope().$root

• Jeśli zaznaczyłeś dyrektywę o zakresie izolowania, możesz na nią spojrzeć za pomocą:

$($0).isolateScope()

Zobacz Porady i wskazówki dotyczące debugowania nieznanego kodu Angularjs, aby uzyskać więcej szczegółów i przykładów.

Sprawdź element, a następnie użyj go w konsoli

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

Po prostu przypisz $scopejako zmienną globalną. Problem rozwiązany.

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

W rzeczywistości potrzebujemy $scopeczęściej w fazie rozwoju niż w produkcji.

Wspomniany już przez @JasonGoemaat, ale dodając go jako odpowiednią odpowiedź na to pytanie.

Używałem angular.element($(".ng-scope")).scope();w przeszłości i działa świetnie. Dobrze, jeśli masz tylko jeden zakres aplikacji na stronie lub możesz zrobić coś takiego:

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

Zwykle używam do tego funkcji jQuery data ():

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

0 $ jest obecnie zaznaczonym przedmiotem w chrome inspektorze DOM. 1 USD, 2 USD .. i tak dalej to wcześniej wybrane elementy.

Powiedz, że chcesz uzyskać dostęp do zakresu elementu, np

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

W konsoli można użyć następujących opcji:

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

To da ci zakres w tym elemencie.

W konsoli 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

Przykład

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

Konsola Chrome

Wymaga to również zainstalowania jQuery, ale działa idealnie w środowisku deweloperskim. Przegląda każdy element, aby uzyskać wystąpienia zakresów, a następnie zwraca je oznaczone tam nazwami kontrolerów. Usuwa także wszelkie właściwości zaczynające się od $, który jest zwykle używany przez angularjs do konfiguracji.

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;
        }

w angular otrzymujemy element jquery przez angular.element () .... pozwala c ...

angular.element().scope();

przykład:

<div id=""></div>

Wyłącznie w celu debugowania umieszczam to na początku kontrolera.

   window.scope = $scope;

  $scope.today = new Date();

I tak to wykorzystuję.

następnie usuń go po zakończeniu debugowania.

Umieść punkt przerwania w kodzie, gdzieś blisko odniesienia do zmiennej $ scope (tak, aby $ scope był w bieżącym zakresie „zwykłego starego JavaScript”). Następnie możesz sprawdzić wartość $ scope w konsoli.

Po prostu zdefiniuj zmienną JavaScript poza zakresem i przypisz ją do swojego zakresu w kontrolerze:

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

Otóż ​​to! Powinien działać we wszystkich przeglądarkach (testowany przynajmniej w Chrome i Mozilli).

Działa i używam tej metody.