为什么在我的AngularJS + RequireJS应用程序中创建控制器2次？

Question

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

我有奇怪的问题。我创建了我的测试控制器，我遇到了问题：控制器初始化触发了两次。

首先，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控制器中的函数定义被触发了两次。我把console.log放在那里看到了：

请你解释一下为什么会这样？为什么控制器被初始化两次？

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

因此，为另一个范围创建一个范围作为子范围。请注意，标识为3的范围具有正确的控制器名称。

Answer 1

如果您使用ng-route注册控制器并将其与视图绑定，则不要使用html文件中的属性再次添加它们。