为什么 Angular 控制器需要“$scope”答案

【问题标题】：Why does Angular Controller need "$scope"为什么 Angular 控制器需要“$scope”
【发布时间】：2014-05-23 01:53:47
【问题描述】：

我通常了解到，只要以正确的顺序提供函数参数，函数实现可以有任何名称。这使得函数从外部抽象出来，本地名称对输出没有影响。实施者拥有局部变量的所有权利。然而，在 Angular JS 中，有这样的东西似乎违反直觉：

function Controller($scope)
{
    $scope.name = "Something";
}

如果我把“bar”放在那里而不是“$scope”，我会得到一个错误。这不是我们习惯的正常功能。我相信这与 DI 有关，但任何人都可以解释这个概念吗？我发现很难将其称为“函数”，因为它依赖于外部世界——尤其是参数名称。

如果 DI 是真正的原因，谁能告诉我它是如何被调用的？通常，当我想为测试用例模拟一个对象时，我会认为 DI 做得很好。在这种情况下，DI 扮演什么角色？

在我遇到的 DI 的正常场景中，传递的参数会为诸如 foo displayTime(clock) { clock.something } 之类的函数提供服务。时间只是功能的服务。但是在这里我发现，$scope 和框架似乎用函数只是表达逻辑的声明方式发挥了魔力。

编辑：显然 JS minify 破坏了这个功能，我们需要像 How do the function argument names in Angular.js objects connect to other objects? 那样做

【问题讨论】：

Angular 实际上会评估参数（使用 Function.toString ）名称并注入正确的资源，这是您在开始使用 angular 时学到的令人费解的事情之一！看这里：stackoverflow.com/questions/16949889/…
“在我遇到的 DI 的正常情况下，传递的参数为函数提供服务”......在 Angular 中也是如此，但是范围有点特殊...... .github.com/angular/angular.js/wiki/Understanding-Scopes 详细介绍了范围，docs.angularjs.org/guide/scope 可能更多地关注您应该如何使用它们但是您也可以注入自己的时钟服务，定义为：myApp.service('clock', ['otherDependency' , function(od) { this.something = "Im a clock!"; }]);

标签： javascript angularjs function

【解决方案1】：

定义控制器的一种方式如下：

myApp.controller("TestController", ['$scope', function(bar) {
   // now "bar" is actually the scope variable
}]);

Angular 像这样工作的全部原因在于它进行依赖注入的方式。基本上它会查找依赖项（例如$scope）并尝试根据变量的名称注入它们。这意味着如果您将 $scope 命名为不同的名称，那么它会尝试注入其他项目。 bar 不是 Angular 知道如何注入的东西，因此您将获得 undefined 值，而不是您期望的 $scope。

我上面的示例之所以有效，是因为我使用了一个数组来将要注入的变量的名称与变量本身分开。现在您不必使用单词$scope，但您必须保持变量的顺序相同。 DI 的整个概念太复杂了，无法在一篇简短的文章中解释，所以我建议在 Angular 的网站上阅读更多相关信息：https://docs.angularjs.org/tutorial/step_05

DI 点（角度）

如果您想知道 - 为什么要这么麻烦？为什么不自动将$scope 注入列表中的第一个变量？答案是 - 灵活性和定制化。使用 Angular，您可以定义您的服务和工厂，然后将它们注入您的控制器。这使您能够定义共享例程、对象甚至自定义控件，然后在任意数量的控制器中使用它们。没有 DI - 这一切都不可能。同样，这些都是非常复杂的概念，所以我建议从“它有效”的信念开始，学习服务，然后你可以回去阅读更多关于它的信息。在这一点上，我认为 DI 应该更有意义！

祝你好运！

【讨论】：

有趣。所以基本上你的意思是这个函数是由Angular而不是外部世界调用的？它不是纯粹的 JS 函数？
@Nishant 您可以从任何内容中调用您定义的函数，但它显然不会对您有多大好处。不管怎样，你应该使用这里提供的语法draw_w，因为这也意味着你可以安全地缩小你的代码而不破坏功能。
@Nishant 它使用DI注入变量，但它仍然是一个纯javascript函数。我建议阅读更多关于 DI 的内容，以了解这里发生了什么！
是的，我的意思是 DI 对 Angular 框架有特殊用途。是的，我会检查 DI 概念。
@Nishant Angular 使用它的注入器 ($injector) 进行大多数实例化并调用您在 Angular 应用程序中定义的函数...注入器是一个 IoC 容器。 DI 它自己并没有做任何事情，因为它只是指定了一个概念，用于从外部提供对象/服务所需的东西。 IoC 容器意味着您可以自动化整个创建过程。因此，您可能还应该阅读一些有关 IoC 容器的信息。在 JavaScript 中，我们无法通过“类型”或“接口”来解决问题，因此我们使用名称。