javascript - 为什么在我的 AngularJS + RequireJS 应用程序中 Controller 被创建了 2 次？

Question

我正在创建名为puzometr的小型应用程序。它仅用于教育需求。我想使用 AngularJS 创建这个应用程序。另外，我想使用 RequireJS 作为模块系统。

我有一个奇怪的问题。我创建了测试 Controller ，但遇到了问题: Controller 初始化触发两次。

首先，完整的代码可以在 GitHub 上找到。 (等等，不要点击我，我会在下面解释所有内容)。

所以，问题出在 myCtrl.js 文件中。这是该文件的代码:

define(['angular'], function (angular) {
  var module = angular.module('main.myModule', []);
  module.controller('main.myCtrl', function ($scope) {
    console.log($scope.$id);
    $scope.bob = function () {
    }
  })
});

它通过以下方式包含在 main/controllers/controllers.js 中:

define(['app', 'main/controllers/myCtrl'], function (app) {
  var module = angular.module('main.controllers', ['main.myModule']);
});

此文件通过以下代码包含在 main.js 中:

angular.module('main', ['ngRoute', 'main.services', 'main.controllers', 'main.directives']);

并且 main.js 包含在 app.js 中:

var app = angular.module('myApp', ['ngRoute', 'main', 'common']);

所以，我偶然注意到，myCtrl Controller 中的函数定义触发了两次。我把 console.log 放在那里并看到了这个:

您能解释一下为什么会发生这种情况吗？为什么 Controller 被初始化两次？

另外，我在 ng-inspector 中有这个:

因此，一个作用域被创建为另一个作用域的子作用域。请注意，ID 为 3 的作用域具有正确的 Controller 名称。

Answer 1

如果您使用 ng-route 注册 Controller 并将它们与 View 绑定(bind)，则不要使用 html 文件中的属性再次添加它们。