Verwenden eines Kind-Controllers von einem anderen Modul

Ich habe ein Modul definiert und es mit der ng-app-Direktive zum Hauptmodul für meine App gemacht. Mit der Anwendung angle.module ('myApp'). Controller() habe ich zwei Controller zur Haupt-App hinzugefügt. Einer dieser Controller hat einen seitenweiten Bereich, während der andere Controller ein Kind-Controller ist.Verwenden eines Kind-Controllers von einem anderen Modul

Was ich jetzt versuche, ist ein Controller, der zu einem anderen Modul gehört (nicht das Haupt-myApp-Modul), aber ich kann es nicht herausfinden. Ich möchte keine globalen Namespace-Controller.

Wer weiß, wie man das macht? Hier

ist das, was ich bisher:

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

Dieser Code gibt die folgenden mit einem JavaScript-Fehler im Wesentlichen sagen, dass der othermodule.controller Controller nicht gefunden wurde.

App main controller content

App sub controller content

{{content}}

Exact Fehler:

> Error: Argument 'othermodule.controller' is not a function, got 
> undefined 
> [email protected]://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:1005 
> [email protected]://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 
> [email protected]://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:140 
> [email protected]://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:4307 
> [email protected]://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:3953 
> [email protected]://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:3956 
> [email protected]://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:4338 
> [email protected]://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:3953 
> [email protected]://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:3858 
> bootstrap/</<@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:964 
> [email protected]://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:7993 
> [email protected]://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:8073 
> bootstrap/<@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:962 
> [email protected]://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:2843 
> [email protected]://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:961 
> [email protected]://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:936 
> @http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:14729 
> b.Callbacks/[email protected]://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3 
> b.Callbacks/[email protected]://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3 
> [email protected]://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3 
> [email protected]://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3 
> 
> http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js 
> Line 5687

Quelle

2013-04-19 James

Was haben Sie zur Zeit geschehen ist "erklärte" zwei Module app und module.

Wenn Sie eckige Bootstraps haben, haben Sie sie aufgefordert, mit app bootstrap. So, jetzt Ihre Anwendung bootstraps mit app aber die app hat keine Referenz zu Ihrem anderen Modul (das ist module!).

Also, müssen Sie entweder Ihre Anwendung Bootstrap mit app und eine Abhängigkeit von module oder Bootstrap Ihrer Anwendung mit einem völlig neuen Modul angeben und eine Abhängigkeit von app und module angeben. Diese

ist, wie Sie eine Abhängigkeit

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

definieren Wenn Sie ein völlig neues Modul erstellen möchten, und beide geben als

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

Hinweis Abhängigkeiten:, wenn Sie ein völlig neues Modul erstellen , müssen Sie Ihre eckige Anwendung mit diesem neuen Modul bootstrap.

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

Quelle

2013-04-19 21:49:10 ganaraj

Das macht 100% Sinn. Vielen Dank. – James

Verwenden eines Kind-Controllers von einem anderen Modul

Antwort

Verwandte Themen