理解自變數的目的

當使用控制器作為語法時，在使用 ng-controller 指令時，你將在控制器中為控制器新增別名。

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

然後，你可以從代表我們的控制器例項的主變數訪問屬性和方法。例如，讓我們訪問控制器的 greeting 屬性並將其顯示在螢幕上：

<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 使用函式級別作用域規則，因此 itsLate 中的 this 指的是與方法體外部的 this 不同的東西。但是，如果我們使用自變數，我們可以得到所需的結果 ：

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

  self.greeting = "Hello World";

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

})

這是在控制器中使用自變數的美妙之處 - 你可以在控制器中的任何位置訪問它，並且始終可以確保它正在引用你的控制器例項。