Hello,
Following the example code you give (pasted below) I wonder whether the event bound to “modal.hidden” could keep happening after this modal instance closed (scope pollution, the event would apply to all modals that would be created while using this scope).
Personally I tried another syntax, I used modal’s scope, I paste my code at bottom. However it cause me trouble with TSLINT because “scope” property is absent from ionic.modal.IonicModalController interface.
I have only access to $rootScope since this modal is displayed at my application startup.
$ionicModal website documentation code:
angular.module('testApp', ['ionic']) .controller('MyController', function($scope, $ionicModal) { $ionicModal.fromTemplateUrl('my-modal.html', { scope: $scope, animation: 'slide-in-up' }).then(function(modal) { $scope.modal = modal; }); $scope.openModal = function() { $scope.modal.show(); }; $scope.closeModal = function() { $scope.modal.hide(); }; //Cleanup the modal when we're done with it! $scope.$on('$destroy', function() { $scope.modal.remove(); }); // Execute action on hide modal $scope.$on('modal.hidden', function() { // Execute action });
My working (typescript) code:
let deferred = $q.defer(); $ionicModal.fromTemplateUrl("templates/listProfiles.html", { animation: "slide-in-up", scope: $rootScope, backdropClickToClose : false, }).then(function (modal: any): void { console.debug("modal created"); $rootScope.selectProfileModal = modal; $rootScope.selectProfileModal.show(); modal.scope.$on("modal.hidden", function (): void { console.debug("modal closed"); deferred.resolve(true); }); }); return deferred.promise;
Well, I found out that I should give a try to the answer here so that I have explicit access to modal’s isolated scope: ionicModal $scope woes
Thanks,
Babs