0

Would like to execute parts of two controllers when I ng-click and my modal pops up

I have two controllers defined (datetimepicker.js to initialize/select a date of a new event and demo.js to save that date/event afterward).

See sample code below or see my plunker (When clicking the Add New Event button, my datetime stays empty because datetimepicker.js doesn't get executed to initialize the values)

I would like for the dates to be initialized according to datetimepicker.js (code below), but I'm not sure what would be the syntax to accomplish that.

index.html (the button)

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

datetimepicker.js (appears in modal and enables user to select date of event)

angular
  .module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap'])
  .controller('DatepickerDemoCtrl', function ($scope) {

  $scope.today = function() {

    var dt1 = new Date();
    dt1.setHours( 9 );
    dt1.setDate( dt1.getDate() + 1 );
    dt1.setMinutes( 0 );
    $scope.dt1 = dt1;

    var dt2 = new Date();
    dt2.setHours( 10 );
    dt2.setDate( dt2.getDate() + 1 )
    dt2.setMinutes( 0 );
    $scope.dt2 = dt2;
  };
  $scope.today();

  *** more code here ***

demo.js (to save date/event selected above)

'use strict';

angular
  .module('demo', ['mwl.calendar', 'ui.bootstrap', 'ngTouch', 'ngAnimate'])
  .controller('MainCtrl', function ($modal, moment, $http) {

    var vm = this;

    vm.calendarView = 'month';
    vm.calendarDay = new Date();

/* 
******************************************
****  Show Create Event Modal
******************************************
*/
    vm.eventCreateClicked = function(event) {
         showCreateEventModal(vm.events);
    };

    function showCreateEventModal(events) {

      var modalInstance;

        modalInstance = $modal.open({
        templateUrl: 'modalCreateEventContent.html',
        controller: function() {
          var vm = this;

          vm.eventSaved = function() { 

               $http.put('/api/events/').success(function(eventsuccess){
               }).error(function(err){
               /* do something with errors */
               });

               //alert('Event Saved'); 
               modalInstance.close();
          };
        },
        controllerAs: 'vm'
      });
    }     

*** more code here ***
2
  • Controllers don't call Controllers. Controllers depend on a Service. Controller-A calls Service, Controller-B calls Service. But if you must you may send Events between controllers. Broadcast events Commented Nov 3, 2015 at 18:42
  • ok I see, any ideas about the syntax to get there? I need to get the code in datetimepicker.js (above) to get executed on function showCreateEventModal(events) (from demo.js) Commented Nov 3, 2015 at 19:09

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.