Używanie kontrolera podrzędnego z innego modułu

Zdefiniowałem moduł i uczyniłem go głównym modułem dla mojej aplikacji przy użyciu dyrektywy ng-app. Dodałem dwa kontrolery do głównej aplikacji za pomocą angular.module ("myApp"). Controller(). Jeden z tych kontrolerów ma zasięg strony, podczas gdy drugi kontroler jest kontrolerem podrzędnym.Używanie kontrolera podrzędnego z innego modułu

Co teraz próbuję zrobić, to kontroler, który należy do innego modułu (nie do głównego modułu myApp), ale nie mogę tego rozgryźć. Nie chcę globalnie kontrolerów przestrzeni nazw.

Ktoś wie, jak to zrobić?

Oto co mam do tej pory:

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

Ten kod generuje następujące z błędu JavaScript zasadniczo mówiąc, że othermodule.controller sterownik nie został znaleziony.

App main controller content

App sub controller content

{{content}}

Dokładne Błąd:

> 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

Źródło

2013-04-19 James

Co masz zrobić jest obecnie "ogłoszony" dwa moduły app i module.

Po ustawieniu początkowym w kroku, poprosiłeś go o uruchomienie z numerem app. Więc teraz aplikacja uruchamia się za pomocą app, ale app nie ma odniesienia do twojego innego modułu (który jest module!).

Tak, trzeba będzie albo bootstrap aplikacji z app i określić zależność od module lub bootstrap aplikacji z zupełnie nowego modułu i określić zależność od app i module.

W ten sposób można określić zależność

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

Jeśli chcesz stworzyć zupełnie nowy moduł i określić zarówno jako zależności

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

Uwaga: jeśli stworzyć zupełnie nowy moduł , będziesz musiał załadować swój układ kątowy za pomocą tego nowego modułu ..

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

Źródło

2013-04-19 21:49:10 ganaraj

To ma sens w 100%. Dziękuję Ci. – James

Używanie kontrolera podrzędnego z innego modułu

Odpowiedz

Powiązane problemy