1

I have some form and div in bootstrap modal, when click on div it will add some css class to change the look, and input something in the form, now when I close the modal and open it again the form input and added css class is still there, I want whenever the modal is open, it should be a new one. So I find a solution:

$('#modal).on('hidden',function(){
     $(this).removeData('modal')
})

The idea is that Bootstrap will instantiate an modal first time the modal() fired, and add some data-modal to the modal element, and when next modal() fires, it just show the hidden old modal instance, not create new one, so the above method try to delete the data-modal attributes and force the Bootstrap to instantiate an new modal.

But it seems won't work in angular, here is what I have:

 <div class='row' >
    <div class='span14' >
        <div data-new-modal='new_item_modal' id='new_item' class='item' >create</div>
    </div>
</div>

<div id='new-item-modal' data-item-modal>
     // modal body
</div>

angular

directive.newItem = function(){
    return {
        restrict:'A',
        link:function(scope,element,attrs){
            element.bind('click',function(){
                $('#'+attrs.newItem).modal();
            });
        }
    };
};

directive.itemModal = function(){
    return {
        restrict:'A',
        link:function(scope,element,attrs){
            element.on('hidden',function(){
                console.log(element.data('modal'))
                                    element.removeData('modal') // wont work
                //scope.$apply(element.removeData('modal')) wont work either
                console.log(element.data('modal'))
            })
        }
    }
};

Any idea How to reset bootstrap modal in angular?

And I just find out even if I refresh the page the sometime the modal still stay the same!

messivanio
  • 2,263
  • 18
  • 24
paynestrike
  • 4,348
  • 14
  • 46
  • 70

1 Answers1

1

Looking to the javascript plugin code. The tooltip and popover both have a destroy function. For some reason the modal lacks such function.

Try to add a destroy function to the modal plugin or destroy your modal in the same way:

, destroy: function () {
  this.hide().$element.off('.' + this.type).removeData(this.type)
}

Callback function after tooltip / popover is created with twitter bootstrap? shows you how to extend the plugin functions. In this case you could extend the hideModal function.

        var tmp = $.fn.modal.Constructor.prototype.hideModal;
        $.fn.modal.Constructor.prototype.hideModal = function () {
          tmp.call(this);

          /*reset your modal here */


        }

After the modal has been hide you could reset the form input and remove the class. See: http://bootply.com/66189 for an example.

If you use angularjs to insert a new modal in your dom every time you could use the above to remove it on hide.

Community
  • 1
  • 1
Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224
  • well It wont work, I see the destroy function you give is from Tooltip,but It wont work om modal, It will be great if you can help me implement this function for modal. – paynestrike Jul 01 '13 at 02:54
  • Yes, you are right. I changed my answer. The modal is in your dom already. You can't destroy it (only remove from the Dom). IF the modal is removed from the DOM it can't fired again. – Bass Jobsen Jul 01 '13 at 20:31