在AngularJS中的var vs this vs scope(1.4)

Question

嗨,我正在学习角度,并且已经忘记了解'var','this'和'$ scope'之间的区别.
虽然我读了这个链接,但它超越了我的脑海.
当我使用ng-controller="myController as ctrl",我只能访问的变量和函数上设置此.
而定义ng-controller="myController" 我只能访问$ scope上的变量和函数集.
有人可以深入解释这个话题吗？

Answer 1

该关键字var是纯 javascript，就是在 javascript 中声明变量的方式。就像这样：

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

如果您不熟悉，var则应该在尝试 Angular 之前先学习 Javascript，因为 Angular 的学习曲线可能非常陡峭。

话虽如此，我将尝试解释其他概念。

使用控制器作为

当使用推荐的controllerAs语法时，您将获得对模板中控制器实例的引用。这就是您使用时会发生的情况<div ng-controller="myController as ctrl"></div>；

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

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

为了使变量name在模板中可用，必须首先将其声明为控制器的公共成员/变量。这就是this- 关键字发挥作用的地方。当您创建控制器时，要将变量公开name，您可以这样做：

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

这this是 Javascript 中的一个特殊概念，它是对函数上下文的引用 - 但只是基本的 Javascript。

使用$范围

当您像这样使用控制器时：<div ng-controller="myController"></div>您无法直接访问模板中的控制器实例。相反，每次您在 Angular 表达式中使用某些内容（例如 ）时，{{name}}Angular 都会隐式假定该变量name存在于 $scope 变量中。当链接到模板时，每个控制器都有一个与其关联的 $scope 变量。要在控制器主体内访问此变量，您将像这样访问它：

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

推荐使用controllerAs语法的部分原因是，当使用$scope时，当你有多个嵌套作用域（即嵌套控制器）时，很难确定你引用的是哪个作用域。如本例所示：

<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及更高版本。