How can I call methods from different controllers in an Ionic action sheet?

Question

Assuming a typical Ionic action sheet service call:

app.controller('MainCtrl', function($scope, $ionicActionSheet) {
  $scope.showDetails = function() {
    $ionicActionSheet.show({
     buttons: [
       { text: 'Complete' }
     ],
     destructiveText: 'Delete',
     titleText: 'Update Todo',
     cancelText: 'Cancel',
     buttonClicked: function(index) {
       return true;
     }
   });
  }
})

... how can I make the actions more diverse by calling methods from two different controllers? Say I have a controller that loads content and one that loads a comment modal, I might want to call their respective methods like so:

buttonClicked: function(index) {
   if (index == 0) {
       // call method from controller 1
   } else if (index == 1) {
       // call method from controller 2
   }
 }

Given the controllers' isolated scopes, I cannot simply call $scope.scopeMethod() like I otherwise might. I've looked into $broadcast and $emit, but those techniques seem like pollution of $rootScope and otherwise inefficient.

Based on attempted solutions below, I've put together a simple demo: http://codepen.io/anon/pen/yYgPXQ

Thanks much.

Answer 1

Not really sure exactly what you are needing but I think what you want is a service method to wrap the action sheet service call:

app.factory('myActions', function ($ionicActionSheet) {
    function showActionSheet(params, callback) {
        $ionicActionSheet.show({
            buttons: [{
                text: params.text
            }],
            destructiveText: params.action,
            titleText: params.title,
            cancelText: 'Cancel',
            buttonClicked: function (index) {
               if(callback){
                   callback();
               }
               return true;
            }
        });

    }

    return showActionSheet;

});

In controller:

$scope.showDetails = function() {
   myActions({text:'Delete'}, $scope.doSomething);
}

$scope.doSomething = function(){
   alert('I did it!');
}

If this isn't quite what you want regarding the button callback...events aren't horrible if not abused or button callback could also be wired to other service methods that might be injected in the controllers

Answer 2

If I understand the question you want to use different methods according to the action of the action sheet.

I would use a service for that. In angular services are:

Angular services are substitutable objects that are wired together using dependency injection (DI). You can use services to organize and share code across your app.

Technically $ionicActionSheet is a service.

Services are singleton so, once created, they can be used within your application and, eventually, can share data as well.

The easiest way to create a service is:

app.factory('myService', function() {

    var factory = {}; 

    factory.method1 = function() {
            //..
        }

    factory.method2 = function() {
            //..
        }

    return factory;
});

Here we've created an object which exports 2 methods: method1 and method2. Once you've defined your service you can inject it in your controller and use its members:

app.controller('MainCtrl', function($scope, $ionicActionSheet, myService) {
  $scope.showDetails = function() {
    $ionicActionSheet.show({
     buttons: [
       { text: 'Complete' }
     ],
     destructiveText: 'Delete',
     titleText: 'Update Todo',
     cancelText: 'Cancel',
     buttonClicked: function(index) {
    myService.method1();
        return true;
     }
   });
  }
});

The new service myService is injected here:

app.controller('MainCtrl', function($scope, $ionicActionSheet, myService)

and it's called when the button is clicked:

myService.method1();

Sometimes you might find services created with the keywork .service:

app.service('myService', function() {

}

For the differences you can read more here.

If want to see a working example you can check this plunker.

dataService is a service which returns an array of object which will be shown in your view. When the users presses the complete button dataService.markAsComplete(id) will be called. This method will set the element of the array as completed. Same thing will happen when you press delete. This time dataService.deleteCity(id) will be called and the element in the array will be marked as deleted.

Your $scope.showDetails would look like this:

$scope.showDetails = function(id) {
   $ionicActionSheet.show({
     buttons: [{
       text: 'Complete'
     }],
     destructiveText: 'Delete',
     titleText: 'Update Todo',
     cancelText: 'Cancel',
     buttonClicked: function(index) {
     if (index === 0)
     {
         $scope.cities = dataService.markAsComplete(id);
         return true;
     } 
     return false;
   },
   destructiveButtonClicked : function() {
       $scope.cities = dataService.deleteCity(id);
       return true;
   }      
});

UPDATE:

Following our conversation I've create a codepen where you can see how an action sheet calls a services, fetches some data, opens a modal which shows the data.

Your controller depends on some services: $ionicActionSheet, $ionicModal and our custom CommentSrvc (those services have been injected):

.controller('AppCtrl', function($scope, $ionicActionSheet, $ionicModal, CommentSrvc) {
     $scope.modal = null;
     $scope.comments = [];
}); 

As you can see it defines 2 elements: our modal and a list of comments which will be fetched by the service.

The action sheet will open a modal:

$ionicActionSheet.show({
  titleText: 'My Title',
  buttons: [{
    text: 'Upload'
  }, {
    text: 'Comments'
  }],
  buttonClicked: function(index) {
    if (index == 0) {
      // Upload
      return false;
    } else if (index == 1) {
      // Comments
      $scope.openModal();
    }

    return true;
  },
  cancelText: 'Cancel',
  cancel: function() {
    console.log('CANCELLED');
  }
});

as you can see in $scope.openModal();

The modal has been created before:

  function createModal() {
    $ionicModal.fromTemplateUrl('comments-modal.html', {
      scope: $scope,
      animation: 'slide-in-up'
    }).then(function(modal) {
      $scope.modal = modal;
    });
  }

and saved in our scope.

Now, when the modal is opened (before showing) it will call the service, fetch the data and put the array of data in the $scope.comments list, as you can see here:

$scope.openModal = function() {
    CommentSrvc.fetchData()
      .then(function(result) {
        console.log(result);
        $scope.comments = result;
        $scope.modal.show();
      })
      .catch(function(reason) {
        $scope.comments = [];
        // Show error here!     
      });
};

CommentSrvc.fetchData() will return a promise cause, presumably, we're going to call some sort of $http service there. If the operation is successful the call back (see .then branch) will feed the returned data in $scope.comments and open the modal: $scope.modal.show().

The service does not do much here. It's just exposing a method fetchData which returns an array of items.
I've used a promise cause promises can be chained and $http returns promises, anyway:

  function fetchData() {
    var deferred = $q.defer();

    var data = [{your data}];

    deferred.resolve(data);

    return deferred.promise;
  }

Last I've changed your modal comments-modal.html using a directive ng-repeat to show all the data stored in $scope.comments:

<div class="item item-avatar" href="#" ng-repeat="comment in comments">
    <img src="../img/{{comment.image}}">
    <h2>{{comment.title}}</h2>
    <p>{{comment.body}}</p>
</div>