2013-04-19 3 views
12

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> 

이 코드는 출력 자바 스크립트 오류가 본질적으로 othermodule.controller 컨트롤러를 찾을 수 없다는 말과 함께 다음 여기에

는 내가 지금까지 가지고있는 것입니다.

App main controller content

App sub controller content

{{content}}

정확한 오류 :

> 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 

답변

21

는 당신이 현재 완료했다 "선언"두 개의 모듈 appmodule.

앵귤러 부트 스트랩이있을 때 app으로 부트 스트랩하도록 요청했습니다. 이제 응용 프로그램이 app으로 부트 스트랩되지만 app에는 다른 모듈 (예 : module!)에 대한 참조가 없습니다.

그래서, 당신은 app와 응용 프로그램을 부트 스트랩과 module에 종속성을 지정하거나 완전히 새로운 모듈과 응용 프로그램을 부트 스트랩 및 appmodule에 종속성을 지정하거나해야합니다. 당신은 완전히 새로운 모듈을 작성하는 경우 :

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

참고 종속성으로 당신은 완전히 새로운 모듈을 만들고 모두를 지정하려는 경우 종속성을

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

을 정의하는 방법

이입니다 ,이 새 모듈로 각도 응용 프로그램을 부트 스트랩해야합니다.

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

그건 100 % 의미가 있습니다. 고맙습니다. – James

관련 문제