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

发布时间：2020-12-17 07:33:18 所属栏目：安全来源：网络整理

导读：我已经定义了一个模块,并将其作为使用ng-app指令的应用程序的主要模块.我使用angular.module(‘myApp’).controller()添加了两个控制器到主应用程序.其中一个控制器具有广泛的范围,而另一个控制器是子控制器. 我现在想要做的是包括一个属于另一个模块的控制

我已经定义了一个模块,并将其作为使用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控制器.

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

你目前做的是“声明”两个模块的应用程序和模块.

当角度引导时,您已经要求它通过应用程序引导.所以现在你的应用程序引导应用程序,但应用程序没有引用你的其他模块(这是模块！).

因此,您必须使用应用程序引导应用程序,并指定对模块的依赖关系,或者使用全新模块引导应用程序,并指定对应用程序和模块的依赖.

这就是你如何定义依赖关系

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

如果要创建一个全新的模块并将它们指定为依赖关系

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!