AngularJS $scope 和 Controller 作为语法真的没有区别吗？答案

【问题标题】：Is there really no difference between AngularJS $scope and Controller as syntax?AngularJS $scope 和 Controller 作为语法真的没有区别吗？
【发布时间】：2016-05-18 21:35:10
【问题描述】：

我正在学习 angularJS，在学习过程中发现控制器作为语法更容易阅读，并且对于来自 OO 世界的我来说更容易理解。我已经阅读了几篇文章和 SO 答案，它们似乎都指向 $scope 和 'controller as ' 语法是相同的，并且 'controller as' 语法只是语法糖。

但是，我在 SO here 上发布了另一个问题，回答该问题的用户说即使我使用控制器作为语法，我仍然必须注入 $scope 才能使用“ui select”指令。它是哪一个？如果我不必使用 $scope，我还缺少什么让“控制器作为”语法与 ui-select 一起使用？

【问题讨论】：

我在这里写了一个关于这个主题的相当详细的答案：stackoverflow.com/a/30644370/2495283。我不会再尝试回答了，但我希望答案能给你一些好的背景。

标签： javascript angularjs angularjs-scope angularjs-ng-repeat angularjs-controlleras

【解决方案1】：

controllerAs 语法将您的控制器暴露给模板，因此您可以将它们设置为控制器实例的属性，而不是将一堆属性绑定到控制器中的$scope。（控制器是 JavaScript“类”构造函数。）

所以如果你有以下情况：

angular.module('myApp')
  .controlller('MyController', function() {
    var vm = this;
    vm.foo = 'bar';
  });

...您可以像这样在模板中访问它：

<div ng-controller="MyController as vm">
  {{ vm.foo }}
</div>

现在，如果您想访问控制器中的作用域变量——或调用诸如 $on 之类的作用域方法——您仍然需要将$scope 注入到控制器中。请注意范围之前的$，这表明它是一项服务。这个$scope 服务只是暴露了当前范围。

综上所述，如果您发现自己将$scope 注入到您的控制器中，您应该质疑您的方法。最好通过链接函数创建自定义指令和访问范围，或从模板访问范围。

【讨论】：

【解决方案2】：

controller as 很好，因为你可以嵌套 ng-controllers 并知道你在哪个控制器上操作

<div ng-controller="Ctrl1 as c1">
  <--Using c1 here -->
  <div ng-controller="Ctrl2 as c2">
  <-- Using c2 here -->
  </div>
  <--Using c1 here -->
</div>

【讨论】：

【解决方案3】：

对不起，这很长，没有例子。

Controller 和 Controller As 两种形式的控制器都是函数。与我理解的主要区别是 Controller As 调用时使用 new 关键字调用，这就是“this”语法起作用的原因。这也是为什么您可以使用 Controller As 语法进行原型继承，而使用普通的 Controller 语法却无法做到这一点的原因。关于 Controller As 的另一个很酷的部分是命名空间，您可以在其中放置范围变量，这意味着在 HTML 中很容易推断出哪些部分进入了哪个控制器。如果你愿意，我可以举一些例子，但这是我理解的核心区别。

【讨论】：