本文介绍了使用来自另一个模块的子控制器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经定义了一个模块，并使用 ng-app 指令使其成为我的应用程序的主模块.我使用 angular.module('myApp').controller() 向主应用程序添加了两个控制器.其中一个控制器具有页面范围，而另一个控制器是子控制器.
我现在要做的是包含一个属于另一个模块(不是主 myApp 模块)的控制器，但我无法弄清楚.我不想全局命名空间控制器.
有人知道怎么做吗?
这是我目前所拥有的:
<html lang="en" data-ng-app='myApp' data-ng-controller='myApp.mainController'><头><meta charset="utf-8"><title>未命名</title><script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><脚本>$(函数(){var 应用程序，模块；//创建两个模块，其中一个将用于应用程序库app = angular.module('myApp', []);模块 = angular.module('otherModule', []);//为主应用程序创建主控制器app.controller('myApp.mainController', function($scope) {$scope.content = '应用主控制器内容';});//为主应用创建子控制器app.controller('myApp.subController', function($scope) {$scope.content = '应用子控制器内容';});//为另一个模块创建一个控制器module.controller('othermodule.controller', function($scope) {$scope.content = '其他模块控制器内容';});});<身体><!-- 从主模块输出主控制器的内容:myApp -->{{内容}}<!-- 指定使用主模块的子控制器并输出其内容--><div data-ng-controller='myApp.subController'>{{内容}}
<!-- 不工作-理想情况下应该从其他模块的控制器输出内容--><div data-ng-controller='othermodule.controller'>{{内容}}
<!-- 加载角度库--><script src="lib/angular/angular.js"></script></html>
此代码输出以下带有 JavaScript 错误的内容，实际上是说找不到 othermodule.controller 控制器.
应用主控制器内容
应用子控制器内容
{{content}}
确切错误:
>错误:参数othermodule.controller"不是函数，得到>不明确的>assertArg@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:1005>assertArgFn@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:1016>@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:4740>applyDirectivesToNode/nodeLinkFn/<@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:4322>forEach@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:140>nodeLinkFn@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:4307>CompositeLinkFn@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:3953>CompositeLinkFn@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:3956>nodeLinkFn@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:4338>CompositeLinkFn@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:3953>publicLinkFn@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:3858>bootstrap/</<@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:964>Scope.prototype.$eval@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:7993>Scope.prototype.$apply@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:8073>bootstrap/<@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:962>invoke@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:2843>bootstrap@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:961>angularInit@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:936>@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:14729>b.Callbacks/c@http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3>b.Callbacks/p.fireWith@http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3>.ready@http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3>H@http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3>>http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js>5687线
解决方案
你目前所做的是声明"了两个模块 app 和 module.
当 Angular 引导程序时，您已经要求它使用 app 引导程序.所以现在您的应用程序使用 app 引导，但 app 没有引用您的其他模块(即 module! ).
因此，您必须要么使用 app 引导您的应用程序并指定对 module 的依赖，要么使用全新的模块引导您的应用程序并指定对 module 的依赖code>app 和 module.
这就是你定义依赖的方式
angular.module('app',['module']);
如果你想创建一个全新的模块并将两者都指定为依赖项
angular.module('myApp',['app','module'])
注意:如果你创建一个全新的模块，你必须用这个新模块引导你的 angular 应用程序..
I've defined a module and made it the main module for my app using the ng-app directive. I added two controllers to the main app using angular.module('myApp').controller(). One of those controllers has page wide scope whereas the other controller is a child controller.
What I'm now trying to do is include a controller that belongs to another module (not the main myApp module), but I can't figure it out. I do not want to globally namespace controllers.
Anyone know how to do this?
Here is what I have so far:
<!doctype html>
<html lang="en" data-ng-app='myApp' data-ng-controller='myApp.mainController'>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
var app, module;
//create two modules, one of which will be used for the app base
app = angular.module('myApp', []);
module = angular.module('otherModule', []);
//create main controller for main app
app.controller('myApp.mainController', function($scope) {
$scope.content = 'App main controller content';
});
//create child controller for main app
app.controller('myApp.subController', function($scope) {
$scope.content = 'App sub controller content';
});
//create a controller for the other module
module.controller('othermodule.controller', function($scope) {
$scope.content = 'Other module controller content';
});
});
</script>
</head>
<body>
<!-- output content from main controller from main module: myApp -->
{{content}}
<!-- specify use of main module's child controller and output its content -->
<div data-ng-controller='myApp.subController'>
{{content}}
</div>
<!-- NOT WORKING - ideally should output content from the other module's controller -->
<div data-ng-controller='othermodule.controller'>
{{content}}
</div>
<!-- load angular library -->
<script src="lib/angular/angular.js"></script>
</body>
</html>
This code outputs the following with a JavaScript error essentially saying that the othermodule.controller controller was not found.
Exact Error:
> Error: Argument 'othermodule.controller' is not a function, got
> undefined
> assertArg@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:1005
> assertArgFn@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:1016
> @http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:4740
> applyDirectivesToNode/nodeLinkFn/<@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:4322
> forEach@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:140
> nodeLinkFn@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:4307
> compositeLinkFn@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:3953
> compositeLinkFn@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:3956
> nodeLinkFn@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:4338
> compositeLinkFn@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:3953
> publicLinkFn@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:3858
> bootstrap/</<@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:964
> Scope.prototype.$eval@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:7993
> Scope.prototype.$apply@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:8073
> bootstrap/<@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:962
> invoke@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:2843
> bootstrap@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:961
> angularInit@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:936
> @http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:14729
> b.Callbacks/c@http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3
> b.Callbacks/p.fireWith@http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3
> .ready@http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3
> H@http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3
>
> http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js
> Line 5687
解决方案
What you have done currently is "declared" two modules app and module.
When angular bootstraps, you have asked it to bootstrap with app. So now your application bootstraps with app but the app has no reference to your other module ( which is module! ).
So, you will have to either bootstrap your application with app and specify a dependency on module or bootstrap your application with a totally new module and specify a dependency on app and module.
This is how you define a dependency
angular.module('app',['module']);
If you want to create a totally new module and specify both as dependencies
angular.module('myApp',['app','module'])
Note : if you create a totally new module, you will have to bootstrap your angular application with this new module..
<html ng-app="myApp"...
这篇关于使用来自另一个模块的子控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
