角度控制器作为语法，特殊场合还需要 $scope 吗？答案

【问题标题】：angular controller as syntax, still need $scope for special occasion?角度控制器作为语法，特殊场合还需要 $scope 吗？
【发布时间】：2015-04-23 20:40:27
【问题描述】：

我正在使用 Angular 的“控制器作为名称”语法。

假设下面的函数是我的控制器

function myCOntroller($scope)
{
  $scope.$emit('event');
}

上述功能正在运行。我试过如下

function myController()
{
  var reference = this;
  reference.$emit('event');
}

这不起作用。当我可以使用引用进行数据绑定时。为什么我不能用它来做这种事情。我认为 reference 现在具有 $scope 所具有的所有功能。如果 $emit 以这种方式工作，难道没有意义吗？

注意：对代码示例感到抱歉。我刚刚问了这个问题概念证明，所以没有任何真正的代码。

【问题讨论】：

$scope 不是控制器本身。

标签： javascript angularjs angularjs-scope

【解决方案1】：

如前所述here，

'Controller as' 是在 1.2 中引入的语法糖，并试图修复 $scope 的体验（至少它的一部分受到范围原型继承的不良影响）。

<body ng-controller="MyCtrl as myCtrl">
...
app.controller('MyCtrl', function () {
  ...
});

等同于

<body ng-controller="MyCtrl">
...
app.controller('MyCtrl', function ($scope) {
  $scope.myCtrl = this;
  ...
});

它并没有消除对范围的需求，而是将有用的模式引入控制器（请注意，在前一个示例中您不需要注入 $scope，除非您需要 $scope.$on 等）。

因此，当您希望它充当模型时，请使用 this 而不是 $scope。

【讨论】：

【解决方案2】：

“controllerAs”不会生成this == $scope。

使用最佳实践之前controllerAs，控制器应该与范围一起使用。

angular.module("myApp")
.controller("myController", ["$scope", function MyController ( $scope ) {
    var myControl = { data: 123 };
    $scope.myControl = myControl;
}]);

HTML 看起来像

<div ng-controller="myController">{{ myControl.data }}</div>

对于controllerAs，this 是控制器（不是$scope），这意味着您不必在$scope 上放置任何东西，您可以忽略它，大多数时候，除非您有特定需求（事件、带有属性的指令等）。

this.$scope == $scope

angular.module("myApp")
.controller("myController", [function MyController ( ) {
    var myController = angular.extend(this, { data: 123 });
    myController.$scope.$emit( /* ... */ );
}]);

让你写作

<div ng-controller="myController as myControl">
    {{ myControl.data }} <!-- === $scope.myControl.data -->
   <!-- "as" sets the name of the controller, on the scope -->
   <!-- $scope.myControl.$scope === $scope -->
</div>

【讨论】：

this.$scope 未定义，所以myController.$scope.$emit (/*..*/) 会抛出错误。 Fiddle without $scope injection。 Working fiddle with $scope injected