这个简单的 AngularJs 页面中的控制器在哪里？答案

【问题标题】：Where is the controller in this simple AngularJs page?这个简单的 AngularJs 页面中的控制器在哪里？
【发布时间】：2015-11-15 22:00:23
【问题描述】：

我被告知每个带有 ngApp 指令的 AngularJS 页面都有一个控制器，提供 $scope。在W3Schools 站点给出的最早、最简单的示例中，代码没有 ngController 标签：

<!DOCTYPE html>
<html lang="en-US">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div ng-app="">
    <p>Name : <input type="text" ng-model="name"></p>
    <h1>Hello {{name}}</h1>
</div>

</body>
</html>

该页面显然可以工作——在 W3Schools 链接上试试——并且有范围（$scope.name）。总是有隐式控制器吗？

谢谢，杰罗姆。

【问题讨论】：

标签： javascript angularjs angularjs-controller angularjs-module

【解决方案1】：

此页面上没有控制器。但是ng-controller 并不是创建 $scope 的唯一指令。 ng-app 还创建了一个 $scope，这就是 name 所在的 $scope

控制器只是一些与作用域交互的代码。

【讨论】：

好点。我建议不要按照本书的 w3school 示例进行操作。大多数时候，它们并不详尽，甚至是错误的。
根据 stackoverflow 其他地方的建议，我在包含 ngApp (
...) 的 DIV 上放置了一个 ID，然后在控制台中调用 angular.element($ ('#xx')).scope()。属性之一是“名称”。这向我证明了这个答复的正确性。这是 ngApp 的 $scope 还是 $rootScope？谢谢回复。杰罗姆。
我相信 ng-app 创建了一个 $rootScope 的子作用域，但它继承自 $rootScope，所以在大多数情况下，您可以将它们视为同一事物
@rob 看看我的编辑。实际上，当应用模块为空时，只需将变量添加到其$rootScope

【解决方案2】：

好吧，它只是 UI 中的一种简单的双向绑定，它实际上创建了控制器本身并将 $scope 绑定到您的指令：但在现实世界中，您必须创建一个模块，然后将控制器注入其中。这只是让您了解 AngularJS 是什么，我在这里找到了 jenkov 的一个非常好的教程，它将指导您从头开始创建 AngularJs 应用程序 Link to the Tutorial 另外在 google 上搜索一些 AngularJs JsFiddle 的例子，你可以找到很多可以帮助你入门的——

【讨论】：

【解决方案3】：

不，那里没有隐式控制器，在幕后是$rootScope

当您没有在 angular ng-app 中指定 module 时，它将在没有 angular 模块的页面上初始化 angular。

但由于您没有在此处提供ng-controller，Angular 将创建$scope，它将使用$rootScope，并在$rootScope 中创建变量。

因为每当您在页面上编写ng-controller 指令时。 Angular 在当前运行的作用域上使用$new(false) 方法从父scope 创建和新作用域。在这种情况下，如果我们在这里引入ng-controller，那么它可能是$rootScope.$new()。

编辑

您可以通过使用angular.injector 访问$rootScope 来验证代码是否已添加到$rootScope

代码

function checkScopeValues() {
  var app = angular.element(document.getElementById('test')).injector();
  var rootScope = app.get('$rootScope');
  alert("value from rootScope " + rootScope.name);
}

Plunkr Here

【讨论】：

在之前的评论中，我使用 angular.element().scope() 来获取 $scope。我还没有看到任何可以让我从 Javascript 控制台获取 $rootScope 的东西。有吗？注意：我遍历了从 .scope() 获得的值，但没有看到 $rootScope 的任何内容。
@JeromePMrozak 看看我的编辑，我展示了如何在范围内找到该变量..我也添加了 plunkr..您的代码有效，因为 $rootScope 变量可以在 $scope 中访问
我使用了 checkScopeValues()，它提供了“名称”变量，就像 angular.element().scope() 一样。我会看看这个一段时间。我不知道如何为两个结果分配“绿色检查答案”。但如果可以的话，我会两个都给。
@JeromePMrozak 谢谢.. 我真的不明白为什么我的回答被否决了？