5

I want to keep the state of my bootstrap.ui (OR ngdialog!!) modal window when it is closed. Any idea how I might ng-show/ng-hide a modal window?

Thanks.

notAChance
  • 1,360
  • 4
  • 15
  • 47
  • possibly http://stackoverflow.com/questions/21578997/how-to-hide-show-same-modal-instance-with-angularjs? – Jony-Y Nov 04 '15 at 15:24
  • No, the "show" option doesn't exist for bootstrap.ui modal. I don't know what that guy was talking about. docs - https://angular-ui.github.io/bootstrap/ - i actually wish someone would downvote him and add a comment, I can't as I've not enough rep. – notAChance Nov 04 '15 at 15:26
  • well you can always use display or visibility with pure css... – Jony-Y Nov 04 '15 at 15:27
  • Yeah I'd thought of that, just hoped there was another way! Thanks. – notAChance Nov 04 '15 at 15:29
  • you can add a hide or show class to the .modal-dialog level and toggle it – Jony-Y Nov 04 '15 at 15:30
  • its very easy and serves your purpose I think if you want to keep the data only hide it... especially if you say that ui-bootstrap does not support hide... you can always wrap the modal with your own directive and do its manually with bootstrap – Jony-Y Nov 04 '15 at 15:31

1 Answers1

6

Look this example:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<div ng-app>
    <div ng-init="showModal=false">
        <button class="btn btn-primary btn-lg" ng-click="showModal = !showModal">
            Launch demo modal
        </button>
        <div class="modal fade in" aria-hidden="false" style="display: block;" ng-show="showModal">  
            <div class="modal-dialog">    
                <div class="modal-content">   
                    MODAL   
                    <div class="modal-footer">        
                        <button type="button" class="btn btn-primary" ng-click="showModal=false">Ok</button>     
                    </div>    
                </div>  
            </div>
        </div>
    </div>
</div>
Yasin Okumuş
  • 2,299
  • 7
  • 31
  • 62
Emir Marques
  • 2,603
  • 2
  • 16
  • 22
  • Is this good practise to have the modal HTML in the same HTML as your main page? I also have a controller for my modal, so the ng-model will have to be shared via my service. Because of this structure, I have a HTML file dedicated to my modal, so my issue would be - how do I ng-show/ng-hide an entire template? – notAChance Nov 04 '15 at 16:52
  • If the modal is simple can be in code main. This modal is used by other component? – Emir Marques Nov 04 '15 at 17:25
  • Thanks for your help, this works pretty well. It's not as snappy as I'd like it but it's the only solution I've managed to get to work! – notAChance Nov 05 '15 at 10:35