VAR VS此VS $范围在AngularJS（1.4）

Question

您好我正在学习的角度也失去了我的脑海理解之间'变种' 的区别，'这个'和'$范围'。
虽然我读了这个link但它超出了我的头。
当我使用ng-controller="myController as ctrl"时，我只能访问这个上设置的变量和函数。
虽然定义ng-controller="myController"我只能访问$ scope上设置的变量和函数。
有人可以深入解释这个话题吗？

Answer 1

关键字var是纯粹的JavaScript，只是你如何在javascript中声明变量。像这样：

var myName = 'Nikolaj'; 
var myAge = 1700; 
// etc. 

如果你不熟悉var你应该冒险进入前角学习JavaScript，因为角度的学习曲线，可以说是相当陡峭的开始。

这样说我会试着解释其他的概念。

使用controllerAs

当使用推荐controllerAs语法，你在你的模板控制器实例的引用。这是使用<div ng-controller="myController as ctrl"></div>时会发生的情况;

您的控制器基本上是“新的”，并存储在一个名为ctrl的变量中，该变量通过角度在模板中可用。这允许您访问控制器成员（公共函数和变量）的模板是这样的：

<div ng-controller="myController as ctrl"> 
    <p>{{ctrl.name}}</p> 
</div> 

为了使变量name在模板可用，首先必须声明为public成员/你的控制器的变量。这正是this关键字发挥作用的地方。当你创建你的控制器，使变量name公众，你会做这样的：

angular.module('app').controller('myController', function(){ 
    this.name = 'My name variable'; 
}); 

这里this是在Javascript中一个特殊的概念，那就是函数上下文的引用 - 但只是基本的JavaScript。

使用$范围

当你改用您的控制器是这样的：<div ng-controller="myController"></div>你没有在你的模板直接访问控制器实例。相反，每次在角度表达式中使用某些东西时，例如{{name}}，Angular隐含地假定变量name存在于$ scope变量上。链接到模板时，每个控制器都有一个$ scope变量。要访问您的控制器体内这个变量，你会喜欢这个访问：

angular.module('app').controller('myController', function($scope){ 
    $scope.name = 'My name variable'; 
}); 

---

之所以controllerAs建议语法，因为使用$范围时，在某种程度上，它可以当你有多个嵌套的作用域（即嵌套控制器）时，很难确定你指的是哪个作用域。如本例：

<div ng-controller="FirstController"> 
    <h1>{{firstControllerVariable}}</h1> 
    <div ng-controller="SecondController"> 
     <h2>{{whereDoIBelong}}</h2> 
    </div> 
</div> 

随着controllerAs语法，这是很清楚哪些变量属于哪个控制器：

<div ng-controller="FirstController as first"> 
    <h1>{{first.firstControllerVariable}}</h1> 
    <div ng-controller="SecondController as second"> 
     <h2>{{second.iKnowWhereIBelong}}</h2> 
    </div> 
</div> 

另一个原因是使用controllerAs语法是因为它会更容易迁移到ES2016及以上。