Question

我最近阅读了角度文档（https://code.angularjs.org/1.4.9/docs/guide/providers）：

myApp.controller('DemoController', ['clientId', function DemoController(clientId) {
  this.clientId = clientId;
}]);

与：

相关联

<html ng-app="myApp">
  <body ng-controller="DemoController as demo">
    Client ID: {{demo.clientId}}
  </body>
</html>

然后我感到惊讶，因为使用的是this而不是注入的$scope服务。

我试图成功复制，然后我想知道是否有人可以解释一个使用控制器实例优于注入$scope的用例？

Answer 1

请参阅John Papa's style guide about controllerAs：

... controllerAs语法比经典的$ scope语法
更接近JavaScript构造函数的语法
它促进了对视图中“点”对象的绑定的使用（例如，customer.name而不是name），这更加符合上下文，更易于阅读，并且避免了在没有“点”的情况下可能出现的任何引用问题。

有助于避免在具有嵌套控制器的视图中使用$ parent调用。

我在日常使用中发现的最大好处是它在控制器中提供了命名空间的概念，而不仅仅是让这种“自由变量”的感觉在你的标记周围漫游。 / p>

如果您有嵌套控制器，这一点尤为重要，因为它提供了命名空间变量（甚至是具有相同名称的变量）的方法，但确保它们位于正确控制器的上下文中。

Answer 2

为什么最好使用controller as在this guide中有详细描述。

为什么？：控制器构建，“新建”，并提供一个单独的   新实例，controllerAs语法更接近于a   JavaScript构造函数，而不是经典的$ scope语法。

为什么？：它促进了对视图中“虚线”对象的绑定的使用   （例如customer.name而不是name），这更加容易上下文   阅读，并避免任何可能发生的参考问题   “打点”。

为什么？：帮助避免在嵌套的视图中使用$ parent调用   控制器。

然而，最好使用专用变量来访问控制器实例：

myApp.controller('DemoController', ['clientId', '$scope', function DemoController(clientId, $scope) {
  var self = this;
  self.clientId = clientId;

  //to watch the vars
  $scope.$watch('self.clientId', function(new, old) {});
}]);

关于控制器的Angular文档

2 个答案: