Latest web development tutorials

AngularJS Geltungsbereich (Scope)

Scope (Scope) in der Link HTML (View) und JavaScript (Controller) verwendet, um zwischen.

Scope ist ein Ziel, Methoden und Eigenschaften zur Verfügung stehen.

Scope kann in der Ansicht und Controller verwendet werden.


How to use Scope

Wenn Sie Controller AngularJS erstellt haben , können Sie denGültigkeitsbereich Objekt als Argument $:

AngularJS Beispiele

Controller-Attribute entsprechend den Attributen sehen auf:

<Div ng-app = "myApp " ng-Controller = "myCtrl">

<H1> {{carname}} </ h1>

</ Div>

<Script>
var app = angular.module ( 'myApp' , []);

app.controller ( 'myCtrl', function ( $ scope) {
$ Scope.carname = "Volvo";
});
</ Script>

Versuchen »

Beim Hinzufügen vonRahmen $ in die Controller - Objekte kann die Ansicht (HTML) , um diese Eigenschaften zu bekommen.

Ansicht, brauchen Sie nicht zu$ scope Präfix hinzufügen möchten , müssen Sie nur einen Attributnamen, wie hinzuzufügen:{{carname}}.


Scope Übersicht

AngularJS Anwendung besteht aus folgenden Komponenten:

  • Ansicht (Ansicht), dh HTML.
  • Model (Modell), die aktuelle Ansicht der verfügbaren Daten.
  • Controller (Controller), die JavaScript-Funktion, können Sie hinzufügen oder Eigenschaften ändern.

Umfang das Modell.

Scope ist ein JavaScript-Objekt-Eigenschaften und Methoden mit diesen Attributen und Methoden können in Ansichten und Controller verwendet werden.

AngularJS Beispiele

Wenn Sie die Ansicht, Modell ändern und Controller werden aktualisiert:

<Div ng-app = "myApp " ng-Controller = "myCtrl">

<Input ng-Modell = "name ">

<H1> Mein Name ist {{name}} </ h1 >

</ Div>

<Script>
var app = angular.module ( 'myApp' , []);

app.controller ( 'myCtrl', function ( $ scope) {
$ Scope.name = "John Dow";
});
</ Script>

Versuchen »

Anwendungsbereich Anwendungsbereich

Verstehen Sie den Bereich, den Sie derzeit verwenden ist sehr wichtig.

In beiden Fällen gibt Umfang nur ein Bereich ist, so dass der Prozess ist relativ einfach, aber in großen Projekten, hat HTML-DOM mehrere Bereiche, dann müssen Sie den Umfang der entsprechenden Umfang zu wissen, ist, was Sie verwenden a.

AngularJS Beispiele

Wenn wirng-Repeat - Befehl zu verwenden, haben jedes Duplikat des aktuellen doppeltes Objekt besucht:

<Div ng-app = "myApp " ng-Controller = "myCtrl">

<Ul>
<Li ng-repeat = "x in Namen"> {{x}} </ li>
</ Ul>

</ Div>

<Script>
var app = angular.module ( 'myApp' , []);

app.controller ( 'myCtrl', function ( $ scope) {
$ Scope.names = [ "Emil", "Tobias", "Linus"];
});
</ Script>

Versuchen »

Jedes<li> -Element die aktuellen doppelten Objekte zugreifen können, ist hier eine entsprechende Zeichenfolge, und Variable xangibt.


Stammbereich

Alle Anwendungen haben ein$ rootScope, es für alle HTML - Elemente ng-App- Direktive enthält angewendet wird.

$ RootScope kann auf die gesamte Anwendung handeln.Jeder Controller ist im Bereich der Brücke. Rootscope mit dem Wert in jedem Controller definiert können in eingesetzt werden.

AngularJS Beispiele

Wenn Sie erstellen einen Controller zu $ ​​rootScope geben als Parameter in der Anwendung verwendet werden können:

<Div ng-app = "myApp " ng-Controller = "myCtrl">

<H1> {{Name}} Familienmitglieder: </ h1>

<Ul>
<Li ng-repeat = "x in Namen"> {{x}} {{name}} </ li>
</ Ul>

</ Div>

<Script>
var app = angular.module ( 'myApp' , []);

app.controller ( 'myCtrl', function ( $ scope, $ rootScope) {
$ Scope.names = [ "Emil", "Tobias", "Linus"];
$ RootScope.lastname = "Refsnes";
});
</ Script>

Versuchen »