Source
使用$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;
}
});
在上面，我们使用 $scope 对象控制器和视图创建了具有三个变量和一种行为的 AddController，它们相互通信。 $scope 对象用于将数据和行为传递给视图。它将视图和控制器粘合在一起。
基本上 $scope 对象执行以下任务：
将数据从控制器传递到视图
将行为从控制器传递到视图
将控制器和视图粘合在一起
$scope 对象在视图更改时被修改，而视图在 $scope 对象的属性更改时被修改
我们将属性附加到 $scope 对象以将数据和行为传递给视图。在控制器中使用 $scope 对象之前，我们需要将它作为依赖项传递到控制器函数中。
使用“controller as”语法和vm
我们可以使用控制器作为语法和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>
如您所见，要访问父控制器的年龄属性，我们使用 $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>
在作为语法的控制器中，我们有更多可读的代码，并且可以使用父控制器的别名而不是使用 $parent 语法来访问父属性。
我将在结束这篇文章时说，是否要将控制器用作语法或 $scope 对象完全取决于您的选择。两者都没有太大的优势或劣势，只是鉴于视图上嵌套控制器的明确分离，控制器作为您可以控制上下文的语法更容易使用。