Utilisation d'un contrôleur enfant d'un autre module

J'ai défini un module et en a fait le module principal pour mon application à l'aide de la ng-app directive. J'ai ajouté deux contrôleurs de l'application principale en utilisant angulaire.module('myApp').contrôleur(). L'un de ces contrôleurs est la page de large portée, alors que l'autre contrôleur est un contrôleur enfant.

Ce que je suis maintenant en train de faire est d'inclure un contrôleur qui appartient à un autre module (pas la principale myApp module), mais je ne peux pas le comprendre. Je ne veux pas globalement de l'espace de noms des contrôleurs.

Quelqu'un sait comment faire cela?

Voici ce que j'ai à ce jour:

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

Ce code affiche le suivant avec une erreur JavaScript disant essentiellement que le othermodule.contrôleur contrôleur n'a pas été trouvé.

App contrôleur principal du contenu

Application sous contrôleur de contenu

{{contenu}}

D'Erreur Exact:

> 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

source d'informationauteur James

  1. 21

    Ce que vous avez fait ne l'est actuellement ", a déclaré" deux modules app et module.

    Quand angulaire s'amorce, vous ont demandé de bootstrap avec app. Alors maintenant, votre application démarre avec app mais la app n'a pas de référence à votre autre module ( qui est module! ).

    Donc, vous devrez soit bootstrap votre application avec app et spécifier une dépendance sur module ou bootstrap votre application avec un tout nouveau module et spécifier une dépendance sur app et module.

    C'est une façon de définir une dépendance

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

    Si vous voulez créer un tout nouveau module et de spécifier à la fois en tant que dépendances

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

    Remarque : si vous créer un tout nouveau module, vous aurez pour amorcer votre angulaire de l'application avec ce nouveau module.. 

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