A controller into a controller in AngularJS

Question

I'm already using the Angular Bootstrap Calendar and it's working fine. I've added a button to show a modal so I can add a new event using the ui.bootstrap.datepicker.

When the modal pops up, I get the following console message:

"Error: [ng:areq] http://errors.angularjs.org/1.4.3/ng/areq?p0=DatepickerDemoCtrl&p1=not%20a            1.#QNAN0unction%2C%20got%20undefined

Here's a sample of the code I have in my plunker (index.html)

<body ng-cloak="" ng-app="demo">
    <div id="demo" ng-controller="MainCtrl as vm" class="row">

    <button class="btn btn-primary pull-right" ng-click="vm.eventCreateClicked(vm.events)">Add new event</button>

    <mwl-calendar> </mwl-calendar>    --> Calendar defined in here      


    <div ng-app="app" ng-controller="DatepickerDemoCtrl">
    <script type="text/ng-template" id="modalCreateEventContent.html">
      <div class="modal-body" id="modalEventCreate">
      </div>
    </script>
    </div> <!-- ng-controller -->

</div>        
</body>

My Add new event button calls the eventCreateClicked function in demo.js

two `ng-app` wouldn't work on the same page.. – Pankaj Parkar Nov 02 '15 at 20:46 — Pankaj Parkar, Nov 02 '15 at 20:46

score 1 · Accepted Answer · edited May 23 '17 at 12:03

1

Nested apps are doable in Angular but aren't available out of the box and can't be generally recommended. This case isn't an exception. Nested ng-app won't do any harm here either, it just will be ignored.

DatepickerDemoCtrl belongs to ui.bootstrap.demo module (not app), therefore ui.bootstrap.demo module should be loaded in demo module:

angular
  .module('demo', ['mwl.calendar', 'ui.bootstrap', 'ngTouch', 'ngAnimate', 'ui.bootstrap.demo'])

edited May 23 '17 at 12:03

Community

1
1

answered Nov 02 '15 at 21:22

Estus Flask

206,104
70
425
565

Super, this got rid of the error above. Thanks a lot! I get a `Error: v is undefined` related to `/0.13.1/ui-bootstrap-tpls.min.js` and AngularJS, but i'm guessing that's another problem. – user3489502 Nov 03 '15 at 12:29
Always use unminified versions of libraries during development, this way the errors make more sense. – Estus Flask Nov 03 '15 at 12:53
The fix above got rid of the erreor I had, but it seems like it ignores datetimepicker.js when the modal pops up, so I get other errors about the datetimepicker. see [my plunker](http://plnkr.co/edit/tpSzPhTbR29wjEIYmmXf) – user3489502 Nov 03 '15 at 13:52
It is the same plunker as in original post, nothing was fixed there. It is large piece of code, I would suggest to resolve the issues one by one in separate questions. – Estus Flask Nov 03 '15 at 15:01
Done - [link here](http://stackoverflow.com/questions/33502123/controller-loads-but-not-executed-again-on-ng-click-angularjs) – user3489502 Nov 03 '15 at 16:16

score 0 · Answer 2 · edited May 23 '17 at 11:58

0

You have nested ng-app. This is not allowed in AngularJS. You can have multiple adjacent applications on a page, but then you have to bootstrap them explicitly. See this answer

edited May 23 '17 at 11:58

Community

1
1

answered Nov 02 '15 at 20:47

www.admiraalit.nl

5,768
1
17
32

The link is for *adjacent* applications and does not apply to nested apps, this can be misleading. – Estus Flask Nov 02 '15 at 21:09

A controller into a controller in AngularJS

2 Answers2