angularjs - Using a child controller from another module -
i've defined module , made main module app using ng-app directive. added 2 controllers main app using angular.module('myapp').controller(). 1 of controllers has page wide scope whereas other controller child controller.
what i'm trying include controller belongs module (not main myapp module), can't figure out. not want globally namespace controllers.
anyone know how this?
here have far:
<!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 2 modules, 1 of used app base app = angular.module('myapp', []); module = angular.module('othermodule', []); //create main controller main app app.controller('myapp.maincontroller', function($scope) { $scope.content = 'app main controller content'; }); //create child controller main app app.controller('myapp.subcontroller', function($scope) { $scope.content = 'app sub controller content'; }); //create controller other module module.controller('othermodule.controller', function($scope) { $scope.content = 'other module controller content'; }); }); </script> </head> <body> <!-- output content main controller main module: myapp --> {{content}} <!-- specify use of main module's child controller , output content --> <div data-ng-controller='myapp.subcontroller'> {{content}} </div> <!-- not working - ideally should output content other module's controller --> <div data-ng-controller='othermodule.controller'> {{content}} </div> <!-- load angular library --> <script src="lib/angular/angular.js"></script> </body> </html> this code outputs following javascript error saying othermodule.controller controller not found.
app main controller content
app sub controller content
{{content}}
exact error:
> error: argument 'othermodule.controller' not function, got > undefined > assertarg@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:1005 > assertargfn@http://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 > foreach@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:140 > nodelinkfn@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:4307 > compositelinkfn@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:3953 > compositelinkfn@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:3956 > nodelinkfn@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:4338 > compositelinkfn@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:3953 > publiclinkfn@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:3858 > bootstrap/</<@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:964 > scope.prototype.$eval@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:7993 > scope.prototype.$apply@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:8073 > bootstrap/<@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:962 > invoke@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:2843 > bootstrap@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:961 > angularinit@http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:936 > @http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js:14729 > b.callbacks/c@http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3 > b.callbacks/p.firewith@http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3 > .ready@http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3 > h@http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3 > > http://localhost/sandbox/angular/apptemplate/lib/angular/angular.js > line 5687
what have done "declared" 2 modules app , module.
when angular bootstraps, have asked bootstrap app. application bootstraps app app has no reference other module ( module! ).
so, have either bootstrap application app , specify dependency on module or bootstrap application totally new module , specify dependency on app , module.
this how define dependency
angular.module('app',['module']); if want create totally new module , specify both dependencies
angular.module('myapp',['app','module']) note : if create totally new module, have bootstrap angular application new module..
<html ng-app="myapp"...
Comments
Post a Comment