AngularJS
コントローラ内の自己変数またはこの変数

前書き

自己変数の目的を理解する

"コントローラをシンタックスとして"使用する場合、ng-controllerディレクティブを使用すると、コントローラにhtmlのエイリアスが与えられます。

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

コントローラのインスタンスを表すメイン変数からプロパティとメソッドにアクセスできます。たとえば、コントローラのグリーティングプロパティにアクセスし、それを画面に表示します。

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

さて、私たちのコントローラでは、コントローラインスタンスのgreetingプロパティに値を設定する必要があります（$ scopeやそれ以外のもの）。

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

  self.greeting = "Hello World";
})

正しくHTML表示を持つために私たちは、コントローラ本体のこの内側に挨拶プロパティを設定する必要がありました。私はselfという名前の中間変数を作成しています。どうして？このコードを考えてみましょう：

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

  self.greeting = "Hello World";

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

})

このコードでは、メソッドitsLateが呼び出されたときに、画面上のテキストが更新されると予想されるかもしれませんが、実際にはそうではありません。 JavaScriptは関数レベルのスコープ規則を使用しているため、thisLateの "this"はメソッド本体の外側の "this"とは異なるものを参照します。しかし、 self変数を使用すると、望ましい結果が得られます。

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

  self.greeting = "Hello World";

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

})

これはあなたのコントローラで "自己"変数を使用することの美しさです。コントローラ内のどこにでもアクセスでき、コントローラインスタンスを参照していることが常に確認できます。