christopherthielen / ui-router-extras

THIS PROJECT IS NO LONGER MAINTAINED -- Extras for UI-Router for AngularJS. Sticky States (a.k.a. parallel states), Deep State Redirect (for tab-like navigation), Future States (async state definition)
http://christopherthielen.github.io/ui-router-extras/
MIT License
917 stars 211 forks source link

Is it possible to make a modal dialog sticky ? #294

Closed Avien closed 8 years ago

Avien commented 8 years ago

I mean that it would not render its template+controller more than once I know angular bootstrap $modal removes the DOM element once closed so I guess its impossible

Am I correct?

Thanks

christopherthielen commented 8 years ago

if using ui-bootstrap's $modal service as intended, I'd say it's probably not possible. However, you could ditch the $modal service and use the bootstrap CSS and markup directly. You could ng-hide it when the sticky state is inactivated.

christopherthielen commented 8 years ago

Check out this plunker which demonstrates a declarative bootstrap modal as a directive myModal: http://plnkr.co/edit/VMHjamaVP4THDq76rbIs?p=preview

It's used like so:

    <my-modal as-modal="foo.toggle">
      <div class="modal-header">
        <h3 class="modal-title">I'm a modal state!</h3>
      </div>
      <div class="modal-body">
        <input type="checkbox" ng-model="foo.toggle">Use modal markup<br>
        <a ui-sref=".substate">Substate</a>
        <div ui-view></div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" ng-show="foo.toggle" ui-sref="normal.substate">Close</button> 
      </div>
    </my-modal>