Sử dụng bộ điều khiển con từ một mô-đun khác

Tôi đã xác định một mô-đun và biến nó thành mô-đun chính cho ứng dụng của tôi bằng cách sử dụng chỉ thị ng-app. Tôi đã thêm hai bộ điều khiển vào ứng dụng chính bằng cách sử dụng angular.module ('myApp'). Controller(). Một trong những bộ điều khiển có phạm vi trang rộng trong khi bộ điều khiển khác là một bộ điều khiển con.Sử dụng bộ điều khiển con từ một mô-đun khác

Điều tôi đang cố gắng làm là bao gồm một bộ điều khiển thuộc về một mô-đun khác (không phải là mô-đun myApp chính), nhưng tôi không thể tìm ra nó. Tôi không muốn các bộ kiểm soát không gian tên trên toàn cầu.

Bất kỳ ai biết cách thực hiện việc này?

Dưới đây là những gì tôi có cho đến nay:

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

Mã này kết quả đầu ra sau với một lỗi JavaScript cơ bản nói rằng bộ điều khiển othermodule.controller không được tìm thấy.

App main controller content

App sub controller content

{{content}}

Lỗi chính xác:

> 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

Nguồn

2013-04-19 James

gì bạn đã làm hiện nay là "tuyên bố" hai mô-đun app và module.

Khi khởi động góc, bạn đã yêu cầu khởi động với app. Vì vậy, bây giờ khởi động ứng dụng của bạn với app nhưng app không có tham chiếu đến mô-đun khác của bạn (là module!).

Vì vậy, bạn sẽ phải hoặc là bootstrap ứng dụng của bạn với app và chỉ định một sự phụ thuộc vào module hoặc bootstrap ứng dụng của bạn với một module hoàn toàn mới và chỉ định một sự phụ thuộc vào app và module.

Đây là cách bạn định nghĩa một sự phụ thuộc

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

Nếu bạn muốn tạo một module hoàn toàn mới và xác định cả hai như phụ thuộc

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

Lưu ý: nếu bạn tạo một module hoàn toàn mới , bạn sẽ phải khởi động ứng dụng góc của mình bằng mô-đun mới này ..

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

Nguồn

2013-04-19 21:49:10 ganaraj

Điều đó làm cho cảm giác 100%. Cảm ơn bạn. – James

Sử dụng bộ điều khiển con từ một mô-đun khác

Trả lời

Các vấn đề liên quan