CODEWITHSUNDEEP
javascriptangularjs
participantjava
participantjava

Reputation: 195

calling angular controller from another controller

I'm working on angularjs application. I have multiple angular controllers in my js. I want to call the angular controller from another angular controller . Please find the code below.I want to call myControllerOne from myControllerTwo by passing sid and zone values from myControllerTwo. Any suggestions would be helpful.

app.controller('myControllerOne',function($rootScope,$scope,$uibModal,MyTestService,sid,zone)  {
        //MyTestService.getResults() hits the backend code and get the results
        MyTestService.getResults(sid,zone).then(
            function(response) {
                $scope.responseData = response;
                //logic
                //
            })
    });

app.controller('myControllerTwo', function ($rootScope,$scope,$uibModal,MyTestService) {
   function loadData() {
        MyTestService.getServiceDataResults().then(
            function (response) {
               var cb = function(start, end, label) {
                   var sid = response.sid;
                   var zone = response.zone;
                      $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
                     //i want to call myControllerOne here by passing sid and zone values for this controller
                }
                var optionSet1 = {
                    startDate: moment().subtract(1, 'days'),
                    endDate: moment().subtract(1, 'days'),
                    minDate: minDate,
                    maxDate: maxDate,
                    dateLimit: {
                        days: 60
                    },
                    showDropdowns: true,
                    showWeekNumbers: true,
                    timePicker: false,
                    timePickerIncrement: 1,
                    timePicker12Hour: true,
                    ranges: {
                        'Today': [moment(), moment()],
                        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                        'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                        'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                        'This Month': [moment().startOf('month'), moment().endOf('month')],
                        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                    },
                    opens: 'left',
                    buttonClasses: ['btn btn-default'],
                    applyClass: 'btn-small btn-primary',
                    cancelClass: 'btn-small',
                    format: 'MM/DD/YYYY',
                    separator: ' to ',
                    locale: {
                        applyLabel: 'Submit',
                        cancelLabel: 'Clear',
                        fromLabel: 'From',
                        toLabel: 'To',
                        customRangeLabel: 'Custom',
                        daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
                        monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                        firstDay: 1
                    }
                };

                $('#reportrange span').html(moment().subtract(1, 'days').format('MMMM D, YYYY') + ' - ' + moment().subtract(1, 'days').format('MMMM D, YYYY'));

                $('#reportrange').daterangepicker(optionSet1, cb);

                $('#reportrange').on('show.daterangepicker', function() {
                     console.log("show event fired");
                });
                $('#reportrange').on('hide.daterangepicker', function() {
                     console.log("hide event fired");
                });
                $('#reportrange').on('apply.daterangepicker', function(ev, picker) {
                    console.log("apply event fired, start/end dates are " + picker.startDate.format('MMMM D, YYYY') + " to " + picker.endDate.format('MMMM D, YYYY'));
                });
                $('#reportrange').on('cancel.daterangepicker', function(ev, picker) {
                    console.log("cancel event fired");
                });
            })

    }
     loadData();
});

Upvotes: 1

Views: 56

Answers (2)

IAmKale
IAmKale

Reputation: 3426

If you ever need to pass values between different Controllers, consider instead using a Service to hold the shared data and then injecting it as a dependency in both controllers.

Additionally, if there's functionality in one controller that you want available in another, then that functionality should be lifted up into a service. In your example, instead of using myControllerTwo to manipulate the response returned by your service, manipulate the response within the service and then return the processed data. You can even cache the processed data so that myControllerOne can access it at any time by calling MyTestService.getResults(sid,zone). MyTestService can then retrieve the results and return it to the controller, all without making one controller a dependency of another.

You CAN access a parent controller from a child controller via a Component's require property but honestly this should be avoided as it tightly couples components and can lead to headaches later on.

Upvotes: 2

Pritam Banerjee
Pritam Banerjee

Reputation: 18958

Can you call one controller from another? YES
Should you call one controller from another? NO

Possible Solution: Whatever IAmKale said is absolutely right and that should be the solution.
Hence:

  1. Define two controllers separately and share data through a Service(Services are Singleton Objects and hence can be used to share data between controllers).
  2. In the HTML you can call one controller inside another(still a bad practice)

Upvotes: 1

Related Questions