Ultimele tutoriale de dezvoltare web
 

AngularJS domeniu


Domeniul de aplicare este partea de legare între HTML (view) și JavaScript (controller) .

Sfera este un obiect cu proprietățile și metodele disponibile.

Domeniul de aplicare este disponibil atât pentru vizualizarea și controller.


Cum se utilizează sfera de aplicare?

Atunci când face un controler în AngularJS, tu treci $scope de $scope obiect ca argument:

Exemplu

Proprietăți făcute în controler, pot fi menționate în punctul de vedere:

<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>
Încearcă - l singur »

Când adăugați proprietăți la $scope de (HTML) $scope obiect în controler, vizualizarea (HTML) are acces la aceste proprietăți.

În ecranul, nu utilizați prefixul $scope de {{carname}} $scope , doar vă referiți la o PROPERTYNAME, cum ar fi {{carname}} .


Înțelegerea domeniului de aplicare

Dacă luăm în considerare o cerere AngularJS să constea din:

  • Vezi, care este HTML.
  • Modelul, care este datele disponibile pentru vizualizarea curentă.
  • Controler, care este funcția JavaScript care face / schimbări / elimină / controlează datele.

Apoi, domeniul de aplicare este modelul.

Sfera este un obiect JavaScript cu proprietăți și metode, care sunt disponibile atât pentru vizualizarea și controlerul.

Exemplu

Dacă efectuați modificări în vizualizarea, modelul și controlerul va fi actualizat:

<div ng-app="myApp" ng-controller="myCtrl">

<input ng-model="name">

<h1>My name is {{name}}</h1>

</div>

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

app. controller('myCtrl', function($scope) {
    $scope.name = "John Doe";
});
</script>
Încearcă - l singur »

Cunoaște Domeniul dvs.

Este important să se știe care domeniul de aplicare a face cu tine, în orice moment.

În cele două exemple de mai sus există doar un singur domeniu de aplicare, astfel încât știind domeniul de aplicare nu este o problemă, dar pentru aplicații mai mari, pot exista secțiuni în HTML DOM care se pot accesa numai anumite domenii.

Exemplu

Atunci când se ocupă cu ng-repeat directivă, fiecare repetare are acces la obiectul de repetiție curent:

<div ng-app="myApp" ng-controller="myCtrl">

<ul>
    <li ng-repeat="x in names">{{x}}</li>
</ul>

</div>

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

app. controller('myCtrl', function($scope) {
    $scope.names = ["Emil", "Tobias" , "Linus"];
});
</script>
Încearcă - l singur »

Fiecare <li> element are acces la obiectul curent repetarea, în acest caz un șir de caractere, care este menționată folosind x .


Root Domeniu de aplicare

Toate aplicațiile au un $rootScope , care este domeniul de aplicare creat pe elementul HTML care conține ng-app directivă.

RootScope este disponibil în întreaga aplicație.

În cazul în care o variabilă are același nume atât în ​​domeniul curent și în rootScope, cererea folosesc cea din domeniul de aplicare curent.

Exemplu

O variabila numita "color" există în domeniul de aplicare atât operatorul, cât și în rootScope:

<body ng-app="myApp">

<p>The rootScope's favorite color:</p>
<h1>{{color}}</h1>

<div ng-controller="myCtrl">
    <p>The scope of the controller's favorite color:</p>
    <h1>{{color}}</h1>
</div>

<p>The rootScope's favorite color is still:</p>
<h1>{{color}}</h1>

<script>
var app = angular. module('myApp', []) ;
app. run(function($rootScope) {
    $rootScope.color = 'blue';
});
app. controller('myCtrl', function($scope) {
    $scope.color = "red";
});
</script>
</body>
Încearcă - l singur »