理解自变量的目的

当使用控制器作为语法时，在使用 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";  
  }

})

这是在控制器中使用自变量的美妙之处 - 你可以在控制器中的任何位置访问它，并且始终可以确保它正在引用你的控制器实例。