Recherche…


Introduction

Ceci est une explication d'un modèle commun et généralement considéré comme la meilleure pratique que vous pouvez voir dans le code AngularJS.

Comprendre le but de la variable auto

Lorsque vous utilisez "controller as syntax", vous devez donner à votre contrôleur un alias dans le code HTML lors de l'utilisation de la directive ng-controller.

<div ng-controller="MainCtrl as main">
</div>

Vous pouvez ensuite accéder aux propriétés et méthodes de la variable principale qui représente notre instance de contrôleur. Par exemple, accédons à la propriété de salutation de notre contrôleur et affichons-la à l'écran:

<div ng-controller="MainCtrl as main">
    {{ main.greeting }}
</div>

Maintenant, dans notre contrôleur, nous devons définir une valeur pour la propriété de salutation de notre instance de contrôleur (par opposition à $ scope ou autre chose):

angular
.module('ngNjOrg')
.controller('ForgotPasswordController',function ($log) {
  var self = this;

  self.greeting = "Hello World";
})

Pour que l'affichage HTML soit correct, nous avons dû définir la propriété de salutation à l' intérieur de notre corps de contrôleur. Je crée une variable intermédiaire nommée self qui contient une référence à cela. Pourquoi? Considérez ce code:

angular
.module('ngNjOrg')
.controller('ForgotPasswordController',function ($log) {
  var self = this;

  self.greeting = "Hello World";

  function itsLate () {
    this.greeting = "Goodnight";  
  }

})

Dans ce code ci-dessus, vous pouvez vous attendre à ce que le texte à l'écran se mette à jour lorsque la méthode itsLate est appelée, mais ce n'est pas le cas. JavaScript utilise des règles de portée au niveau des fonctions pour que le "this" dans itsLate fasse référence à quelque chose de différent de "this" en dehors du corps de la méthode. Cependant, nous pouvons obtenir le résultat souhaité si nous utilisons la variable auto :

 angular
.module('ngNjOrg')
.controller('ForgotPasswordController',function ($log) {
  var self = this;

  self.greeting = "Hello World";

  function itsLate () {
    self.greeting = "Goodnight";  
  }

})

C'est la beauté d'utiliser une variable "self" dans vos contrôleurs - vous pouvez y accéder n'importe où dans votre contrôleur et vous pouvez toujours être sûr qu'elle fait référence à votre instance de contrôleur.



Modified text is an extract of the original Stack Overflow Documentation
Sous licence CC BY-SA 3.0
Non affilié à Stack Overflow