別のモジュールの子コントローラの使用

モジュールを定義し、ng-appディレクティブを使用してアプリケーションのメインモジュールにしました。私は、angular.module（ 'myApp'）.controller（）を使用して、メインアプリケーションに2つのコントローラを追加しました。これらのコントローラの1つはページワイドのスコープを持ち、他のコントローラは子コントローラです。別のモジュールの子コントローラの使用

私が現在しようとしているのは、別のモジュール（メインの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 
> [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

出典

2013-04-19 James

あなたが現在やっていることは、2つのモジュールappとmoduleを "宣言" されます。

角度のあるブートストラップは、ブートストラップにappと尋ねてきました。だからアプリケーションはappでブートストラップしますが、appには他のモジュールへの参照がありません（module！）。

だから、あなたはappでアプリケーションをブートストラップし、moduleへの依存性を指定するか、まったく新しいモジュールを使用してアプリケーションをブートストラップし、appとmoduleへの依存性を指定することもあります。

これはあなたが注意まったく新しいモジュールを作成し、依存関係

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

としての両方を指定したい場合は、依存関係

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

を定義する方法です：あなたは全く新しいモジュールを作成する場合をこの新しいモジュールを使用して角型アプリケーションをブートストラップする必要があります。

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

出典

2013-04-19 21:49:10 ganaraj

それは100％の意味を作ります。ありがとうございました。 – James

別のモジュールの子コントローラの使用

答えて

関連する問題