2014-06-23 19 views
37

Sono nuovo in AngularJS e non riesco a capire cosa sia $scope in AngularJS. Qualcuno può spiegare nel modo più semplice possibile cosa fa $scope in AngularJS e cosa possiamo usarlo per. Per favore spiegalo in un modo in cui spieghi a qualcuno che non ha assolutamente alcuna conoscenza della programmazione. Qualcuno può inoltre spiegare il codice sotto linea per linea nel modo più semplice possibile?

function MyController($scope) { 
    $scope.username = 'World'; 

    $scope.sayHello = function() { 
     $scope.greeting = 'Hello ' + $scope.username + '!'; 
    }; 
}; 
+0

La funzionalità di cui sopra può anche essere ottenuta senza alcun riferimento a $ scope [[plunker] (http://plnkr.co/edit/3RFKwkpyqGAU4loTI6hR?p=preview)] – tomd

+0

"$ scope è fondamentalmente un oggetto javaScript con alcuni ganci integrati "([Lukas Ruebbelke] (http://onehungrymind.com/)) – tomd

risposta

49

Ogni controller ha un oggetto $scope associato.

Una funzione controller (costruttore) è responsabile dell'impostazione delle proprietà e delle funzioni del modello. Questo può essere fatto solo tramite $ scope. Qualunque sia la funzione o il modello che si applica in Visualizza (file html), a cui si accede nel controller utilizzando l'ambito.

Solo i metodi definiti su questo oggetto $ scope sono accessibili dalla vista HTML /. Esempio - da NG-click, i filtri, ecc

Ora diamo tua esempi uno per uno -

1.

function MyController($scope) { 
$scope.username = 'World'; 
}; 

Nell'esempio di cui sopra che si sta definendo qualsiasi attributo denominato nome utente con il suo valore come "Mondo". Supponiamo che nel file HTML si ha la seguente riga di codice -

<div ng-controller="MyController"> 
<h1>{{data.username}}</h1></div> 

Questo rileverà automaticamente il valore dal controllore e visualizzarlo sullo schermo. Vale la pena notare che "dati". nel markup è il nome del controller che la pagina html può fare riferimento al controller come. Questo di solito è definito all'interno del controller o nella parte superiore del file html.

2.

$scope.sayHello = function() { 
$scope.greeting = 'Hello ' + $scope.username + '!'; 
}; 

Si tratta di una funzione è stato definito in un controllore cui è possibile accedere in considerazione dal seguente codice -

<div ng-controller="MyController"> 
<h1>{{data.greeting}}</h1></div> 

Qui, data.greeting sceglierà automaticamente valore dalla funzione sayHello ovvero il valore visualizzato sarà "Hello World". "Mondo" dal nome utente concatenato con "Ciao" prima.

Spero che questo chiarisca il tuo dubbio. :)

7

Read The Following Manual.

In altre parole, scope è un "oggetto" che "si lega" all'elemento DOM in cui si applica il controller. Tutti gli elementi figlio possono leggere e modificare i dati dell'ambito (a meno che non si modifichino le primitive in nuovi ambiti o siano isolati).

Problemi correlati