gpt4 book ai didi

angularjs - 使用来自另一个模块的子 Controller

转载 作者:行者123 更新时间:2023-12-01 09:18:21 24 4
gpt4 key购买 nike

我已经定义了一个模块,并使用 ng-app 指令将其作为我的应用程序的主模块。我使用 angular.module('myApp').controller() 在主应用程序中添加了两个 Controller 。其中一个 Controller 具有页面范围,而另一个 Controller 是子 Controller 。

我现在要做的是包含一个属于另一个模块(不是主 myApp 模块)的 Controller ,但我无法弄清楚。我不想全局命名空间 Controller 。

有人知道怎么做吗?

这是我到目前为止所拥有的:

<!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>

此代码输出以下内容,其中包含一个 JavaScript 错误,本质上是说未找到 othermodule.controller Controller 。

App main controller content

App sub controller content

{{content}}



确切的错误:
> 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

最佳答案

你目前所做的是“声明”了两个模块appmodule .

当 Angular 引导时,您已要求它使用 app 引导.所以现在您的应用程序使用 app 进行引导但是 app没有引用您的其他模块(即 module !)。

因此,您将不得不使用 app 引导您的应用程序。并指定对 module 的依赖或使用全新的模块引导您的应用程序并指定对 app 的依赖项和 module .

这是您定义依赖项的方式

angular.module('app',['module']);

如果您想创建一个全新的模块并将两者都指定为依赖项
angular.module('myApp',['app','module'])

注:如果您创建一个全新的模块,您将不得不使用这个新模块引导您的 Angular 应用程序。
<html ng-app="myApp"...

关于angularjs - 使用来自另一个模块的子 Controller ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16113890/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com