AngularJS
Jaźń lub ta zmienna w kontrolerze

Wprowadzenie

Zrozumienie celu zmiennej własnej

Gdy używasz „kontrolera jako składni”, dajesz kontrolerowi alias w html, gdy używasz dyrektywy ng-kontroler.

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

Następnie możesz uzyskać dostęp do właściwości i metod z głównej zmiennej, która reprezentuje naszą instancję kontrolera. Na przykład przejdźmy do właściwości powitania naszego kontrolera i wyświetlmy ją na ekranie:

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

Teraz w naszym kontrolerze musimy ustawić wartość właściwości powitania naszej instancji kontrolera (w przeciwieństwie do $ scope lub czegoś innego):

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

  self.greeting = "Hello World";
})

Aby poprawnie wyświetlać HTML, musieliśmy ustawić właściwość powitania w tej części naszego ciała kontrolera. Tworzę zmienną pośrednią o nazwie self, która zawiera odniesienie do tego. Dlaczego? Rozważ ten kod:

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

  self.greeting = "Hello World";

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

})

W powyższym kodzie można oczekiwać, że tekst na ekranie zostanie zaktualizowany po wywołaniu metody itsLate , ale w rzeczywistości tak się nie dzieje. JavaScript korzysta z reguł określania zakresu na poziomie funkcji, więc „to” wewnątrz swojego obiektu odnosi się do czegoś innego niż „to” poza treścią metody. Możemy jednak uzyskać pożądany wynik, jeśli użyjemy zmiennej własnej :

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

  self.greeting = "Hello World";

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

})

Na tym polega piękno używania zmiennej „self” w kontrolerach - możesz uzyskać do niej dostęp w dowolnym miejscu w kontrolerze i zawsze możesz mieć pewność, że odwołuje się ona do instancji kontrolera.