simple angularjs project download




Come posso accedere alla variabile $ scope nella console del browser usando AngularJS? (12)

Alla console di 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

Esempio 

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

Console di Chrome

Vorrei accedere alla mia variabile $scope nella console JavaScript di Chrome. Come lo faccio?

Non riesco a vedere $scope né il nome del mio modulo myapp nella console come variabili.

Assegna $scope come variabile globale. Problema risolto. 

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

In realtà abbiamo bisogno di $scope più spesso nello sviluppo che nella produzione.

Menzionato già da @JasonGoemaat ma aggiungendolo come risposta adatta a questa domanda.

Da qualche parte nel tuo controller (spesso l'ultima riga è un buon posto), put 

console.log($scope);

Se vuoi vedere un ambito interiore / implicito, ad esempio all'interno di una ng-repeat, qualcosa del genere funzionerà. 

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

Quindi nel tuo controller 

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

Nota che sopra definiamo la funzione showScope () nell'ambito genitore, ma va bene ... l'ambito child / inner / implicit può accedere a quella funzione, che quindi stampa l'ambito in base all'evento, e quindi l'ambito associato a l'elemento che ha licenziato l'evento.

Il suggerimento di @ jm funziona anche, ma non penso che funzioni all'interno di jsFiddle. Ottengo questo errore su jsFiddle all'interno di Chrome: 

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

Di solito uso la funzione jQuery data () per questo: 

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

$ 0 è attualmente selezionato in chrome DOM inspector. $ 1, $ 2 .. e così via sono elementi precedentemente selezionati.

Inserisci un punto di interruzione nel codice in un punto vicino a un riferimento alla variabile $ scope (in modo che $ scope si trovi nell'attuale scope "plain old JavaScript"). Quindi puoi controllare il valore $ scope nella console.

Ispeziona l'elemento, quindi usalo nella console 

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

Per migliorare la risposta di 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();

O se usi jQuery, questo fa la stessa cosa ... 

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

Un altro modo semplice per accedere a un elemento DOM dalla console (come menzionato da jm) è di fare clic su di esso nella scheda 'elementi' e viene automaticamente salvato come $0 . 

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

Questo è un modo per ottenere lo scope senza Batarang, puoi fare: 

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

O se vuoi trovare il tuo scope per nome del controller, fai questo: 

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

Dopo aver apportato modifiche al tuo modello, dovrai applicare le modifiche al DOM chiamando: 

scope.$apply();

Sono d'accordo che il migliore è Batarang con il suo $scope dopo aver selezionato un oggetto (è lo stesso di angular.element($0).scope() o anche più corto con jQuery: $($0).scope() (il mio preferito))

Inoltre, se come me hai il tuo scopo principale sull'elemento body , un $('body').scope() funziona correttamente.

Un avvertimento a molte di queste risposte: se si alias il controller, gli oggetti scope saranno in un oggetto all'interno dell'oggetto restituito da scope() .

Ad esempio, se la direttiva del controller è stata creata in questo modo: <div ng-controller="FormController as frm"> quindi per accedere a una proprietà startDate del controller, si chiamerà angular.element($0).scope().frm.startDate

in angolare otteniamo l'elemento jquery di angular.element () .... lascia c ...

angular.element().scope();

esempio:

<div id=""></div>




simple   angularjs   angularjs-scope  


angularjs-scope