AngularJS Scope

Le scope est le lien entre HTML (vue) et JavaScript (contrôleur).

Scope est un objet avec des méthodes et des propriétés disponibles.

Le Scope peut être appliqué aux vues et aux contrôleurs.

Comment utiliser Scope

Lorsque vous créez un contrôleur dans AngularJS, vous pouvez$scopepasser l'objet en tant que paramètre :

Exemple AngularJS

Les propriétés dans le contrôleur correspondent aux propriétés de la vue :

<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>

Essayez-le »

Lorsque vous ajoutez dans le contrôleur$scopel'objet, la vue (HTML) peut obtenir ces propriétés.

Dans la vue, vous n'avez pas besoin d'ajouter$scopecomme préfixe, ajoutez simplement le nom de la propriété, comme :{{carname}}。

Présentation de Scope

Une application AngularJS se compose des éléments suivants :

  • Vue, c'est-à-dire HTML.
  • Modèle, les données disponibles dans la vue actuelle.
  • Contrôleur, c'est-à-dire une fonction JavaScript qui peut ajouter ou modifier des propriétés.

scope est le modèle.

scope est un objet JavaScript avec des propriétés et des méthodes, et ces propriétés et méthodes peuvent être utilisées dans les vues et les contrôleurs.

Exemple AngularJS

Si vous modifiez la vue, le modèle et le contrôleur seront mis à jour en conséquence.

<div ng-app="myApp" ng-controller="myCtrl"> <input ng-model="name"> <h1>{{greeting}}</h1> <button ng-click='sayHello()'>Cliquez-moi</button> </div> <script>
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.name = "Exemple"; $portée.sayHello = fonction() { $portée.greeting = 'Hello ' + $portée.name + '!'; }; });
</script>

Essayez-le »

Étendue de la portée

Il est très important de comprendre la portée que vous utilisez actuellement.

Dans les deux exemples ci-dessus, il n'y a qu'une seule portée, c'est donc relativement simple, mais dans les grands projets, il y a plusieurs portées dans le DOM HTML, et vous devez savoir quelle portée est celle que vous utilisez.

Exemple AngularJS

Lorsque nous utilisonsng-repeatla directive, chaque élément répété accède à l'objet répété actuel :

<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>

Essayez-le »

Chaque<li>élément peut accéder à l'objet répété actuel, qui correspond ici à une chaîne, et utilise la variablexpour le représenter.

Portée racine

Toutes les applications ont un$rootScope, qui peut agir surng-apptous les éléments HTML contenus par la directive.

$rootScopeIl peut agir sur l'ensemble de l'application. C'est un pont entre les portées dans les différents contrôleurs. Les valeurs définies avec rootscope peuvent être utilisées dans chaque contrôleur.

Exemple AngularJS

Lors de la création d'un contrôleur, passez $rootScope en paramètre, et il peut être utilisé dans l'application :

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

<h1>{{lastname}}Membres de la famille :</h1>

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

</div>

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

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

Essayez-le »
Autres extensions