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
– Pankaj Parkar

2015-11-02 20:46:20 +00:00
Commented Nov 2, 2015 at 20:46 — Pankaj Parkar
– Pankaj Parkar, Commented Nov 2, 2015 at 20:46

Community · Accepted Answer · 2017-05-23 12:03:59Z

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, 2017 at 12:03

CommunityBot

11 silver badge

answered Nov 2, 2015 at 21:22

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user3489502 Over a year ago

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.

Estus Flask Over a year ago

Always use unminified versions of libraries during development, this way the errors make more sense.

user3489502 Over a year ago

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

Estus Flask Over a year ago

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.

user3489502 Over a year ago

Done - link here

Community · Accepted Answer · 2017-05-23 11:58:37Z

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, 2017 at 11:58

CommunityBot

11 silver badge

answered Nov 2, 2015 at 20:47

www.admiraalit.nl

6,1231 gold badge23 silver badges37 bronze badges

1 Comment

Estus Flask Over a year ago

The link is for adjacent applications and does not apply to nested apps, this can be misleading.

Collectives™ on Stack Overflow

A controller into a controller in AngularJS

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related