Search code examples
angularjsangular-strap

why scope of angular-strap modal do not change in modal.hide?


I need to create a delete confirm modal in angular-strap. this is my code where I am trying to show confirm modal:

 $scope.deleteConfirm = function(){
    var delete_scope = $scope.$new(true);
    delete_scope.delete = false ;
    delete_scope.test = "default"; 
    var confModal = $modal({title: 'Confirm', scope:delete_scope, prefixEvent:'conf.event', templateUrl:"ui_component/confirm-mdl.tpl.html", controller:"mdlConfirmCtrl", show:false});
    confModal.$promise.then(confModal.show);
};

and this is my hide event handler for this modal:

$scope.$on('conf.event.hide.before', function(event, data){
    console.log(data.$scope.test) ;
    if(data.$scope.delete) {
        console.log('deleted') ;
    }
    // optional
    //$scope.$apply();
});

and this is my code for mdlConfirmCtrl :

angular.module("taxeeApp").controller("mdlConfirmCtrl",function($scope){
    $scope.toggleFlag = function(){
        console.log($scope.delete) ;
        $scope.delete = !$scope.delete ;
        $scope.test = "value has been changed!!!" ;
        console.log($scope.delete) ;
    } ;
});

but when i call toggleFlag function of mdlConfirm Controller and dismiss the modal I get default value of delete_scope.test and delete.delete.

this is my modal template :

<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <form name="form" novalidate>
            <div class="modal-header">
                <h4 class="modal-title"> Why do you want to delete ? </h4>
            </div>
            <div class="modal-body">
                <!--label><input type="radio" ng-model="reason" value="bored" required /> Bored :( </label>
                <label><input type="radio" ng-model="reason" value="over excited" required /> Over Excited :D </label>
                <label><input type="radio" ng-model="reason" value="exams" required /> Exams :p </label-->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" ng-click="toggleFlag(); $hide() "> Cancel </button>
                <button type="button" class="btn btn-primary" ng-click="toggleFlag(); $hide() "> Delete </button>
            </div>
        </form>
    </div>
</div>

how can I get this Change?


Solution

  • I resolve this problem by changing my delete_scope as following:

    var delete_scope = $scope.$new(true);
    delete_scope.test={delete : false , test :"default"};
    

    instate of :

    var delete_scope = $scope.$new(true);
    delete_scope.delete = false ;
    delete_scope.test = "default"; 
    

    :).