使用另一个模块中的子控制器

一尘不染

使用另一个模块中的子控制器

angularjs

我已经定义了一个模块，并使用ng-
app指令将其设置为我的应用程序的主要模块。我使用angular.module（’myApp’）。controller（）向主应用程序添加了两个控制器。这些控制器中的一个具有页面范围的范围，而另一个控制器是子控制器。

我现在想做的是包含一个控制器，该控制器属于另一个模块（不是主要的myApp模块），但我无法弄清楚。我不想全局命名空间控制器。

有人知道怎么做吗？

这是我到目前为止的内容：

<!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控制器。

应用主控制器内容

应用子控制器内容

{{内容}}

确切错误：

> 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

阅读 244

2020-07-04

共1个答案

一尘不染

您当前所做的是“声明”了两个模块app和module。

使用角度引导时，您已要求使用进行引导app。因此，现在您的应用程序使用进行app了引导，但是app没有对其他模块（即module！）的引用。

因此，您将不得不使用来引导您的应用程序app并指定对它的依赖关系，module或者使用全新的模块来引导您的应用程序并指定对app和的依赖项module。

这是定义依赖项的方式

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

如果您想创建一个全新的模块并将两者都指定为依赖项

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

注意： 如果创建一个全新的模块，则必须使用此新模块来引导角度应用程序。

<html ng-app="myApp"...

2020-07-04