web-dev-qa-db-fra.com

Qu'est-ce que $ scope dans AngularJS?

Je suis nouveau sur AngularJS et je ne comprends pas ce que $scope est dans AngularJS. Quelqu'un peut-il expliquer de la manière la plus simple possible ce que signifie $scope faire dans AngularJS et à quoi pouvons-nous l'utiliser. Veuillez l'expliquer d'une manière que vous expliqueriez à quelqu'un qui n'a absolument aucune connaissance de la programmation. Quelqu'un peut-il également expliquer le code ci-dessous ligne par ligne de la manière la plus simple possible?

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

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

Chaque contrôleur a un $scope objet.

Une fonction de contrôleur (constructeur) est chargée de définir les propriétés et les fonctions du modèle. Cela ne peut se faire que via $ scope. Quelle que soit la fonction ou le modèle que vous appliquez dans View (fichier html), celui-ci est accessible dans le contrôleur à l'aide de la portée.

Seules les méthodes définies sur cet objet $ scope sont accessibles à partir de la vue HTML /. Exemple - à partir de ng-click, filtres, etc.

Prenons maintenant vos exemples un par un -

1.

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

Dans l'exemple ci-dessus, vous définissez tout attribut nommé nom d'utilisateur avec sa valeur "World". Supposons que dans le fichier html vous ayez la ligne de code suivante -

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

Cela récupérera automatiquement la valeur du contrôleur et l'affichera à l'écran. Il convient de noter que les "données". dans le balisage est le nom du contrôleur que la page html peut désigner comme contrôleur. Ceci est généralement défini dans le contrôleur ou en haut du fichier html.

2.

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

Ceci est une fonction que vous avez définie dans un contrôleur auquel vous pouvez accéder en vue en suivant le code -

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

Ici, data.greeting choisira automatiquement la valeur de la fonction sayHello, c'est-à-dire que la valeur affichée sera "Hello World". "Monde" du nom d'utilisateur concaténé avec "Bonjour" avant.

J'espère que cela efface votre doute. :)

55
Manvi

Lire le manuel suivant .

En d'autres termes, la portée est un "objet" qui "se lie" à l'élément DOM où vous appliquez le contrôleur. Tous les éléments enfants peuvent lire et modifier les données d'étendue (sauf si vous modifiez des primitives dans de nouvelles étendues ou qu'elles sont isolées).

8
Miraage