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

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, to robi to samo...

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

Innym łatwym sposobem uzyskania dostępu do elementu DOM z konsoli (jak wspomniano w jm) jest kliknięcie na nim w zakładce 'elements', a zostanie on automatycznie zapisany jako $0.

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

Jeśli zainstalowałeś Batarang

Wtedy możesz po prostu napisać:

$scope

Gdy element jest zaznaczony w widoku elementy w chrome. Ref - https://github.com/angular/angularjs-batarang#console

To jest sposób na dotarcie do scope bez Bataranga, można to zrobić:

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

Lub jeśli chcesz znaleźć swój zakres po nazwie kontrolera, zrób to:

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

Po wprowadzeniu zmian w modelu, musisz zastosować zmiany w DOM, dzwoniąc:

scope.$apply();

Gdzieś w kontrolerze (często ostatnia linia jest dobrym miejscem), umieść

console.log($scope);

Jeśli chcesz zobaczyć wewnętrzny / niejawny zakres, powiedzmy wewnątrz ng-repeat, coś takiego zadział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 jest to w porządku... zakres potomny/wewnętrzny / niejawny może uzyskać dostęp do tej funkcji, która następnie wypisuje Zakres na podstawie zdarzenia, a tym samym zakres związany z element, który wywołał zdarzenie.

@JM-'s sugestia również działa, ale nie sądzę, że działa wewnątrz jsFiddle. Dostaję ten błąd na jsFiddle w Chrome:

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

Jedno zastrzeżenie dla wielu z tych odpowiedzi: jeśli używasz aliasu kontrolera, twoje obiekty scope będą znajdować się w obiekcie wewnątrz zwracanego obiektu z scope().

Na przykład, jeśli twoja dyrektywa kontrolera jest utworzona w ten sposób: <div ng-controller="FormController as frm"> następnie, aby uzyskać dostęp do właściwości startDate kontrolera, należy wywołać angular.element($0).scope().frm.startDate

Zgadzam się najlepszy jest Batarang z $scope po wybraniu obiektu (jest taki sam jak angular.element($0).scope() lub nawet krótszy z jQuery: $($0).scope() (Mój ulubiony))

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

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

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 sprawdzono element, aktualnie wybrany element jest dostępny za pośrednictwem referencji API wiersza poleceń $0. Zarówno Firebug a Chrome ma to odniesienie.

Jednak narzędzia programistyczne Chrome udostępnią pięć ostatnich elementów (lub obiektów sterty) wybranych przez właściwości o nazwie $0, $1, $2, $3, $4 Korzystanie z tych odniesień. Ostatnio wybrany element lub obiekt może być określany jako $0, drugi ostatni jako $1 i tak dalej.

Oto Referencja interfejsu API linii poleceń dla Firebug, która zawiera listę jego referencji.

$($0).scope() zwróci zakres związany z element. Od razu widać jego właściwości.

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

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

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

• możesz też łańcuchować:

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

• możesz spojrzeć na zakres Główny:

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

• jeśli podświetliłeś dyrektywę z izolowanym zakresem, możesz spojrzeć na nią za pomocą:

$($0).isolateScope()

Zobacz porady i wskazówki dotyczące debugowania Nieznany Kod Angularjs więcej szczegółów i przykładów.

Po prostu Przypisz $scope jako zmienną globalną. Problem rozwiązany.

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

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

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

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

Używałem angular.element($(".ng-scope")).scope(); w przeszłości i działa świetnie. Tylko dobre, jeśli masz tylko jeden zakres aplikacji na stronie, lub można 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 aktualnie zaznaczoną pozycją w chrome DOM inspector. $1, $2 .. i tak dalej są wcześniej wybrane elementy.

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

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

Możesz użyć następujących w konsoli:

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

To da Ci zakres dla tego elementu.

Na 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 doskonale dla środowiska programistycznego. Przegląda każdy element, aby uzyskać instancje zakresów, a następnie zwraca je oznaczone tam nazwami kontrolerów. Jego również usunięcie dowolnej właściwości zaczyna się od $ , która jest tym, czego angularjs zwykle używa do swojej 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 ().... lets c...

angular.element().scope();

Przykład:

<div id=""></div>

Tylko dla celów debugowania umieszczam to na początku kontrolera.

   window.scope = $scope;

  $scope.today = new Date();

I tak go używam.

Następnie usuń go, gdy skończę debugować.

Umieść punkt przerwania w kodzie w pobliżu odniesienia do zmiennej $ scope (tak, że $scope znajduje się w bieżącym obszarze 'plain old 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;
     ...