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

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

如果你不熟悉var,你应该在冒险进入Angular之前先学习Javascript,因为Angular的学习曲线可能非常陡峭.

有了这个说我会尝试解释其他概念.

使用controllerAs

使用推荐的controllerAs语法时,您将获得模板中控制器实例的引用.这是当你使用< div ng-controller =“myController as ctrl”>< / div&gt ;; 您的控制器基本上是“新建的”并存储在一个名为ctrl的变量中,该变量在角度模板中可用.这允许您访问模板中的控制器成员(公共函数和变量),如下所示：

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

为了使变量名在模板中可用,必须首先将其声明为控制器的公共成员/变量.这就是this-keyword发挥作用的地方.当您创建控制器时,要将变量名称设为public,您可以这样做：

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

这是Javascript中的一个特殊概念,它是对函数上下文的引用 – 但只是基本的Javascript.

使用$scope

当您使用这样的控制器时：< div ng-controller =“myController”>< / div>您无法直接访问模板中的控制器实例.相反,每次在Angular表达式中使用某些东西时,例如{{name}},Angular会隐式假设$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及更高版本.