AngularJS
Självet eller denna variabel i en kontroller

Introduktion

Förstå syftet med självvariabeln

När du använder "controller som syntax" skulle du ge din controller ett alias i html när du använder ng-controller-direktivet.

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

Du kan sedan komma åt egenskaper och metoder från huvudvariabeln som representerar vår controllerinstans. Låt oss till exempel få tillgång till hälsningsegenskapen för vår controller och visa den på skärmen:

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

I vår controller måste vi nu ställa in ett värde på hälsningsegenskapen för vår controllerinstans (i motsats till $ scope eller något annat):

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

  self.greeting = "Hello World";
})

För att HTML-displayen ska visas korrekt behövde vi ställa in hälsningsegenskapen på denna insida av vår kontrollenhet. Jag skapar en mellanvariabel med namnet själv som hänvisar till detta. Varför? Tänk på den här koden:

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

  self.greeting = "Hello World";

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

})

I den här koden ovan kan du förvänta dig att texten på skärmen ska uppdateras när metoden itsLate kallas, men det gör det inte. JavaScript använder regleringsfunktioner för funktionsnivå så "detta" inuti i dess sena refererar till något annat än "detta" utanför metodkroppen. Däremot kan vi få önskat resultat om vi använder själv variabel:

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

  self.greeting = "Hello World";

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

})

Det här är skönheten med att använda en "själv" -variabel i dina styrenheter - du kan komma åt detta var som helst i din controller och kan alltid vara säker på att det hänvisar till din controllerinstans.