Explication de la portée de la portée dans angulairejs

Cet article présente principalement l'explication détaillée de la portée dans l'apprentissage d'Angularjs. Maintenant, je la partage avec vous et la donne comme référence.

Introduction

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

Scope est un objet qui stocke le modèle de données de l'application, avec les méthodes et propriétés disponibles.

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

Scope est le lien entre le contrôleur et la vue de l'application Web :

Controller--> Scope--> ---> View (DOM)

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

<p ng-controller="myCtrl">
<h1>{{name}}</h1>
</p>

<script>
var app = angular.module(&#39;test&#39;, []);
app.controller(&#39;myCtrl&#39;, function($scope) {
  $scope.name = "天下行走";
});
</script>

Résultat de sortie : Un nom d'attribut "name " est créé dans le contrôleur World Walk

, qui correspond au nom dans la vue en utilisant {{ }}.

Lors de l'ajout de l'objet $scope dans le contrôleur, la vue (HTML) peut obtenir ces propriétés.

Dans la vue, vous n'avez pas besoin d'ajouter le préfixe $scope, il vous suffit d'ajouter le nom de l'attribut, tel que : {{name}}.

L'application AngularJS est composée comme suit :

View (view), qui est du HTML.

Modèle (model), les données disponibles dans la vue actuelle.

Contrôleur (contrôleur), qui est une fonction JavaScript qui peut ajouter ou modifier des propriétés.

Une portée est un objet JavaScript avec des propriétés et des méthodes qui peuvent être utilisées dans les vues et les contrôleurs.

Regardez un autre exemple :

<p ng-app="myApp" ng-controller="myCtrl">
  输入你的名字：
  <input ng-model="name">
  <h1>{{greeting}}</h1>
  <button ng-click=&#39;sayHello()&#39;>greet</button>  
</p>

<script>
var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;myCtrl&#39;, function($scope) {
  $scope.name = "张三";
  $scope.sayHello = function() {
    $scope.greeting = $scope.name + &#39;是个笨蛋!&#39;;
  };
});
</script>

Dans cet exemple,

1. Contrôleur : MyCtrl , qui fait référence à $scope et dans celui-ci Deux propriétés et une méthode est enregistrée sur l'objet

2. $scope : contient le modèle de données requis pour l'exemple ci-dessus, y compris l'attribut de nom et l'attribut de salutation (Remarque : ceci est dans sayHello() enregistré lorsque la méthode est appelé) et la méthode sayHello()

3. View : possède une zone de saisie, un bouton et un bloc de contenu qui utilise une liaison bidirectionnelle pour afficher les données

Ensuite, l'exemple complet comporte les deux processus suivants, du point de vue de l'initiation du contrôleur :

1 Le contrôleur écrit des attributs dans la portée :

Attribuez une valeur au nom dans. la portée, puis la portée informe les données d'entrée dans la vue que les données d'entrée ont changé. Étant donné que l'entrée réalise une liaison bidirectionnelle via ng-model, elle peut connaître le changement de nom, puis restituer la valeur modifiée dans la vue.

2. Le contrôleur écrit une méthode

dans la portée pour attribuer une valeur à la méthode sayHello() dans la portée. Cette méthode est appelée par le bouton dans la vue, car le bouton. est lié à cette méthode via ng-click, lorsque l'utilisateur clique sur le bouton, sayHello() est appelé. Cette méthode lit l'attribut name dans la portée, ajoute la chaîne de suffixe, puis l'attribue à l'attribut de message d'accueil nouvellement créé dans le champ. portée

pour l'ensemble de l'exemple Si vous regardez le processus du point de vue de la vue, il se compose principalement des trois parties suivantes :

1. Logique de rendu en entrée : affiche les deux -. Liaison de manière de la portée via ng-model et un certain élément de formulaire dans la vue

1. Allez à la portée en fonction du nom dans ng-model. S'il y a déjà une valeur, alors. utilisez cette valeur par défaut pour remplir la zone de saisie actuelle

2. Acceptez la saisie de l'utilisateur et transmettez la chaîne saisie par l'utilisateur au nom À ce moment, la valeur de l'attribut dans la portée est mise à jour en réel. time à la valeur saisie par l'utilisateur

2 dans la logique du bouton

accepte les clics de l'utilisateur et appelle la méthode sayHello() dans la portée

3. Logique de rendu de {{greeting}}

1. Étape initiale : lorsque l'utilisateur ne clique pas sur le bouton, aucun contenu n'est affiché

2. Étape de valeur : après que l'utilisateur a cliqué, cette expression obtiendra l'attribut de salutation de la portée, et dans cet exemple, cette portée et le contrôleur sont les mêmes. À ce stade, l'attribut de salutation sous la portée existe déjà et cet attribut est récupéré. en ce moment

3. Phase de calcul : Dans le courant Descendez la portée pour calculer l'expression de salutation, puis restituez la vue, montrant que Zhang San est un imbécile !

Après avoir analysé l'exemple de processus sous les deux perspectives ci-dessus, nous pouvons savoir : L'objet scope et ses propriétés sont la seule source de données pour le rendu de la vue.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Solution à l'erreur d'exécution d'angularjs après avoir utilisé la compression gulp-uglify

Vue+ElementUI implémente le rendu dynamique des formulaires, Méthode de configuration visuelle

Une brève discussion sur la solution aux fichiers excessivement volumineux après l'empaquetage du webpack

Résoudre réellement le problème de l'erreur UglifyJs lors de l'empaquetage d'iview (tutoriel détaillé)

Le problème de l'actualisation de 404 après avoir utilisé vue pour empaqueter le projet (tutoriel détaillé)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!