来源
$scope object使用“controller as”语法和 vm创建控制器的区别
使用 $scope 对象创建控制器
通常我们使用 $scope 对象创建一个控制器，如下面的清单所示：
myApp.controller("AddController", function ($scope) {
$scope.number1;
$scope.number2;
$scope.result;
$scope.add = function () {
$scope.result = $scope.number1 + $scope.number2;
}
});
上面我们创建了具有三个变量和一个行为的 AddController，使用 $scope 对象控制器和视图，它们相互通信。$scope 对象用于将数据和行为传递给视图。它将视图和控制器粘合在一起。
基本上 $scope 对象执行以下任务：
将数据从控制器传递到视图
将行为从控制器传递到视图
将控制器和视图粘合在一起
$scope 对象在视图更改时被修改，当 $scope 对象的属性更改时视图被修改
我们将属性附加到 $scope 对象以将数据和行为传递给视图。在控制器中使用 $scope 对象之前，我们需要将它作为依赖项传递到控制器函数中。
使用“controller as”语法和vm
我们可以使用 controller as 语法和 vm 变量重写上面的控制器，如下所示：
myApp.controller("AddVMController", function () {
var vm = this;
vm.number1 = undefined;
vm.number2=undefined;
vm.result =undefined;
vm.add = function () {
vm.result = vm.number1 + vm.number2;
}
});
本质上，我们将其分配给变量 vm，然后为其附加属性和行为。在视图上，我们可以使用控制器作为语法访问 AddVmController。这显示在下面的列表中：
<div ng-controller="AddVMController as vm">
<input ng-model="vm.number1" type="number" />
<input ng-model="vm.number2" type="number" />
<button class="btn btn-default" ng-click="vm.add()">Add</button>
<h3>{{vm.result}}</h3>
</div>
当然，我们可以在控制器中使用“vm”以外的其他名称作为语法。在幕后，AngularJS 创建 $scope 对象并附加属性和行为。但是，通过使用控制器作为语法，控制器上的代码非常干净，并且视图上只有别名可见。
以下是将控制器用作语法的一些步骤：
创建一个没有 $scope 对象的控制器。
将此分配给局部变量。我更喜欢变量名称为 vm，您可以选择任何您选择的名称。
将数据和行为附加到 vm 变量。
在视图上，使用控制器作为语法为控制器指定别名。
您可以为别名指定任何名称。除非我不使用嵌套控制器，否则我更喜欢使用 vm。
在创建控制器时，使用 $scope 对象方法或控制器作为语法没有直接的优点或缺点。然而，这纯粹是一个选择问题，使用控制器作为语法可以使控制器的 JavaScript 代码更具可读性，并防止与此上下文相关的任何问题。
$scope 对象方法中的嵌套控制器
我们有两个控制器，如下面的清单所示：
myApp.controller("ParentController", function ($scope) {
$scope.name = "DJ";
$scope.age = 32;
});
myApp.controller("ChildController", function ($scope) {
$scope.age = 22;
$scope.country = "India";
});
属性“age”在两个控制器中，在视图上这两个控制器可以嵌套，如下面的清单所示：
<div ng-controller="ParentController">
<h2>Name :{{name}} </h2>
<h3>Age:{{age}}</h3>
<div ng-controller="ChildController">
<h2>Parent Name :{{name}} </h2>
<h3>Parent Age:{{$parent.age}}</h3>
<h3>Child Age:{{age}}</h3>
<h3>Country:{{country}}</h3>
</div>
</div>
如您所见，为了访问父控制器的 age 属性，我们使用了 $parent.age。上下文分离在这里不是很清楚。但是使用控制器作为语法，我们可以以更优雅的方式使用嵌套控制器。假设我们有如下清单所示的控制器：
myApp.controller("ParentVMController", function () {
var vm = this;
vm.name = "DJ";
vm.age = 32;
});
myApp.controller("ChildVMController", function () {
var vm = this;
vm.age = 22;
vm.country = "India";
});
在视图上，这两个控制器可以嵌套，如下面的清单所示：
<div ng-controller="ParentVMController as parent">
<h2>Name :{{parent.name}} </h2>
<h3>Age:{{parent.age}}</h3>
<div ng-controller="ChildVMController as child">
<h2>Parent Name :{{parent.name}} </h2>
<h3>Parent Age:{{parent.age}}</h3>
<h3>Child Age:{{child.age}}</h3>
<h3>Country:{{child.country}}</h3>
</div>
</div>
在控制器 as 语法中，我们有更多可读的代码，并且可以使用父控制器的别名而不是 $parent 语法访问父属性。
我将在这篇文章的结尾说，无论您想使用控制器作为语法还是使用 $scope 对象，这完全是您的选择。两者都没有巨大的优势或劣势，只是考虑到视图上嵌套控制器中的清晰分离，控制器作为您在上下文中控制的语法更容易使用。
