Pass a controller to $ionicModal

Question

I am wondering if you can pass a controller to the $ionicModal service. Something like.

$ionicModal.fromTemplateUrl(\'templates/login.html\', {
  scope: $sco         


        

Answer 1

There's no direct way of doing so in ionic. However, if you really want to have some common code being segregated at one place, You can use services to do so. Here' how.

1. In your modal declaration, pass scope as null, also the modal declaration should move in a service.

app.service('utilsService', function($ionicModal) {

    this.showModal = function() {

        var service = this;

        $ionicModal.fromTemplateUrl('templates/login.html', {
          scope: null,
          controller: 'MyModalCotroller'
        }).then(function(modal) {
            service.modal = modal;
            service.modal.show();
        });
    };

    this.hideModal = function() {
        this.modal.hide();
    };

});

---

2. All your common methods will also move down into the same service.

---

3. Add the reference to this service into your controller's scope.

    app.controller('indexController', function($scope, utilsService) {
        $scope.utilsService = utilsService;
    });

---

4. Now, you can call all the common methods from the view directly using this service.

e.g. Hide modal