Modale riutilizzabile in angolare/ionico

Question

In AngularJS con Ionic, vorrei essere in grado di chiamare una modale da controller diversi senza dover duplicare il codice relativo al modale.

Ecco come creare un modale (abbreviato da http://learn.ionicframework.com/formulas/making-modals/).

HTML:

<div class="card" ng-controller='MainCtrl' ng-click="openModal()"> 
    Click here to open the modal 
</div> 

JS:

app.controller('MainCtrl', function($scope, $ionicModal) 
{ 
    $ionicModal.fromTemplateUrl('contact-modal.html', { 
     scope: $scope, 
     animation: 'slide-in-up' 
    }).then(function(modal) { 
     $scope.modal = modal 
    }) 

    $scope.openModal = function() { 
     $scope.modal.show() 
    } 

    // functions for this modal 
    // ... 
}) 

Ora che è tutto bene un bene, ma se voglio aprire lo stesso modale con la stessa funzionalità da un controller diverso, dovrebbe copiare tutto il codice ad esso correlato.

Come posso astrarre questo per rendere le mie modulazioni riutilizzabili e chiamabili da diversi controller?

Idealmente, vorrei che ogni modale avesse il proprio "controller" (o concetto simile), piuttosto che dover mettere tutto il suo codice nel controller di qualsiasi cosa volesse aprirlo.

Answer 1

Questo è uno scenario perfetto per una direttiva.

direttiva Codice:

app.directive('myPopUp', ['$ionicModal', function($ionicModal) { 

    return { 
     restrict: 'E', 
     scope: { 
      externalScope : "=" 
     } 
     replace: true, 
     templateUrl: 'path/to/your/template', 
     link: function($scope, $element, $attrs) { 

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

      $scope.externalScope.openModal = function() { 
       $scope.modal.show() 
      }; 

     } 
    }; 
}]); 

ed il controller (s):

app.controller('MainCtrl', ['$scope', function($scope) { 

    $scope.externalScope = {} 

}); 

Ogni volta che si desidera includere questo in un parziale basta aggiungere:

<my-pop-up externalScope="externalScope"></my-pop-up> 

la direttiva avere accesso al controller e viceversa tramite l'attributo externalScope. Puoi chiamare $scope.externalScope.openModal() dal tuo controller e attiverà la tua modal direttiva da aprire.

Spero che questo sia stato utile.

Answer 2

Il modo in cui lo faccio è un servizio

app.service('ModalService', function($ionicModal, $rootScope) { 


    var init = function(tpl, $scope) { 

    var promise; 
    $scope = $scope || $rootScope.$new(); 

    promise = $ionicModal.fromTemplateUrl(tpl, { 
     scope: $scope, 
     animation: 'slide-in-up' 
    }).then(function(modal) { 
     $scope.modal = modal; 
     return modal; 
    }); 

    $scope.openModal = function() { 
     $scope.modal.show(); 
    }; 
    $scope.closeModalService = function() { 
     $scope.modal.hide(); 
     //$scope.modal.remove(); 
    }; 
    $scope.$on('$destroy', function() { 
     //$scope.modal.remove(); 
    }); 

    return promise; 
    } 

    return { 
    init: init 
    } 

}) 

Come si usa in un controllore

app.controller('editMyProfileCtrl', function($scope,ModalService) { 

    $scope.openModal = function() { 
    ModalService 
     .init('my-modal.html', $scope) 
     .then(function(modal) { 
      modal.show(); 
     }); 
    }; 
    $scope.closeModal = function() { 
    $scope.closeModalService(); 
    }; 

})