Sherlin Sherlin - 5 months ago 24
AngularJS Question

Cannot make ionicModal template appear only one time upon entering a page

I want to use

ionicModal
to provide a instruction for the user only once(only the first time the user enter the page).

However for my current code, it appears every time the user goes into the page. I googled but did not see relevant results.

This is the working code(appears every time when user goes into page)

.controller('formCtrl', function($scope,$ionicModal, getUrl,$state) {
$ionicModal.fromTemplateUrl('templates/instruction.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();
}
$scope.$on( "$ionicView.enter", function( scopes, states ) {
$scope.openModal();
});
})


Trying to modify it by putting in condition (does not work)

.controller('formCtrl', function($scope,$ionicModal, getUrl,$state, getInstructions) {
$scope.$on("$ionicView.enter", function( scopes, states ) {
if(getInstructions.getInstruction() == true){

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

$scope.openModal = function(){
$scope.modal.show();
}
getInstructions.setInstruction(); //set as false

$scope.closeModal = function() {
$scope.modal.hide();
};

$scope.$on('$ionicView.afterEnter', function(scopes, states) {
console.log("after enter");
$scope.openModal();
});
}
});
})


Thank you in advance!

Answer

Try this

    .controller('formCtrl', function($scope, $ionicModal, getUrl, $state, $rootScope) {
    $ionicModal.fromTemplateUrl('templates/instruction.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();
    }
    $scope.$on('modal.shown', function() {
        $rootScope.modelShown = true;
    });
    $scope.$on("$ionicView.enter", function(scopes, states) {
        if ($rootScope.modelShown != true) {
            $scope.openModal();
        }

    });
})