Question

我有一个使用ngTable和ui-bootstrap的SPA。该页面引用顶级模块中定义的顶级控制器，以及其他模块中定义的多个嵌套控制器。从嵌套控制器到顶层控制器中的服务或范围变量有几个明确的引用，因此嵌套模块具有对顶级模块的引用。但是，为了使其无错误地运行，我必须引用顶级模块中的所有嵌套模块。

如果我没有从顶级模块引用嵌套模块，我会收到如下错误：

Error: [ng:areq] Argument 'DataSourcesCtrl' is not a function, got undefined
http://errors.angularjs.org/1.2.4/ng/areq?p0=DataSourcesCtrl&p1=not%20a%20function%2C%20got%20undefined
minErr/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js:78
assertArg@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js:1358
assertArgFn@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js:1369
@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js:6682
applyDirectivesToNode/nodeLinkFn/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js:6098
forEach@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js:307
nodeLinkFn@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js:6085
compositeLinkFn@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js:5551
publicLinkFn@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js:5459
.link@http://run.plnkr.co/plunks/EBVfG1gWYv7xf8sa5v8a/ui-bootstrap-tpls-0.10.0.js:2822
nodeLinkFn@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js:6140
compositeLinkFn@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js:5548
publicLinkFn@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js:5459
boundTranscludeFn@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js:5570
controllersBoundTransclude@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js:6160
ngRepeatAction@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js:18996
$watchCollectionAction@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js:11449
Scope.prototype.$digest@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js:11552
Scope.prototype.$apply@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js:11803
bootstrap/doBootstrap/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js:1297
invoke@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js:3644
bootstrap/doBootstrap@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js:1296
bootstrap@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js:1309
angularInit@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js:1258
@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js:20306
n.Callbacks/j@http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js:2
n.Callbacks/k.fireWith@http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js:2
.ready@http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js:2
K@http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js:2

<div class="tab-pane ng-scope" ng-repeat="tab in tabs" ng-class="{active: tab.active}" tab-content-transclude="tab">

正如您在我的plunkr中所展示的那样，＆＃34; DataSourcesCtrl＆＃34;是在DataSourcesModule＆＃39;中定义的控制器。在＆＃34; dataSourcesMod.js＆＃34;。如果您注释掉＆＃34; diagapp.js＆＃34;顶部附近的行，它将无误地运行。

这是＆＃34; diagapp.js＆＃34;的顶部。看起来像：

var diagapp = angular.module("DiagApp", ['ui.bootstrap'
//                 , 'DataSourcesModule' // Comment out this line to demonstrate problem
                                     ]);

我想我现在可以理解为什么我必须加载顶层模块中的所有模块，因为否则没有其他方法可以加载这些模块。但是，当我这样做时，我最终得到了循环模块引用，这似乎是错误的。顶级模块中没有任何内容直接引用嵌套模块中的任何内容。

好像我需要调整模块组织。解决这个问题的最佳方法是什么？

Answer 1

我想明显合理的建议是建立一个顶层模块，为该页面加载所有其他必需的模块，以及该模块的任何配置设置，但其他任何模块都没有直接需要的模块。模块。

在此示例中，这意味着将顶级“DiagApp”模块的某些部分分离为“DiagMod”模块。这将包括其他模块需要使用的任何组件。如果顶级模块不需要任何配置设置，那么顶级模块将只有一行指定页面上使用的所有模块，包括新的“DiagMod”模块。

当前的AngularJS模块组织需要循环模块引用

1 个答案: