在AngularJS中对var vs $ scope进行var vs（1.4）

Hi I am learning angular and have lost my mind understanding the difference between 'var', 'this' and '$scope'.
Although I read this link but it went above my head.
When I use ng-controller="myController as ctrl" , I only have access to the variables and function set on this.
Whereas defining ng-controller="myController" I only have access to variables and function set on $scope.
Can some one please explain this topic in depth?

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

1 个解决方案

#1

The keyword var is pure javascript and is just how you declare variables in javascript. Like so:

关键字var是纯javascript,它就是你在javascript中声明变量的方式。像这样:

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

If you're unfamiliar with var you should start by learning Javascript before venturing into Angular, since the learning curve of Angular can be quite steep.

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

With that said I'll try to explain the other concepts.

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

Using controllerAs

When using the recommended controllerAs syntax, you get a reference to the controller instance in your template. This is what happens when you use <div ng-controller="myController as ctrl"></div>;

使用推荐的controllerAs语法时,您将获得模板中控制器实例的引用。当您使用

时会发生这种情况;

Your controller is basically "newed" and stored in a variable called ctrl which is made available in the template by angular. This allows you to access your controller members (public functions and variables) in the template like this:

您的控制器基本上是“新的”并存储在一个名为ctrl的变量中,该变量在角度模板中可用。这允许您访问模板中的控制器成员(公共函数和变量),如下所示:

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

In order for the variable name to be available in the template, it must first be declared as a public member/variable of your controller. That is where the this-keyword comes into play. When you create your controller, to make the variable name public, you'd do it like this:

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

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

Here this is a special concept in Javascript that is a reference to the function context - but just basic Javascript.

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

Using $scope

When you instead use your controller like this: <div ng-controller="myController"></div> you don't have direct access to the controller instance in your template. Instead, every time you use something in an Angular expression, for instance {{name}}, Angular implicitly assumes the variable name exists on the $scope variable. Each controller has a $scope variable associated with it when it is linked to the template. To access this variable inside your controller body, you'll access it like this:

当您改为使用控制器时:

您无法直接访问模板中的控制器实例。相反,每次在Angular表达式中使用某些东西时,例如{{name}},Angular会隐式假设$ scope变量上存在变量名。每个控制器在链接到模板时都有一个与其关联的$ scope变量。要在控制器主体内访问此变量,您可以像这样访问它:

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

The reason why the controllerAs syntax is recommended, is in part because when using $scope, it can be difficult to determine which scope you're referring to when you have multiple nested scopes (i.e. nested controller). As in this example:

推荐使用controllerAs语法的原因部分是因为在使用$ scope时,当您有多个嵌套作用域(即嵌套控制器)时,很难确定您所指的作用域。如下例所示:

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

With the controllerAs syntax, it is pretty clear which variable belongs to which controller:

使用controllerAs语法,很清楚哪个变量属于哪个控制器:

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

Another reason to use the controllerAs syntax is because it'll make it easier to migrate to ES2016 and above.

使用controllerAs语法的另一个原因是因为它可以更容易地迁移到ES2016及更高版本。

#1