CODEWITHSUNDEEP
javascriptangularjs
user3489502
user3489502

Reputation: 3611

A controller into a controller in AngularJS

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

Upvotes: 2

Views: 68

Answers (2)

www.admiraalit.nl
www.admiraalit.nl

Reputation: 6099

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

Upvotes: 0

Estus Flask
Estus Flask

Reputation: 223114

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'])

Upvotes: 1

Related Questions