Creazione di una finestra modale per caricare i dati con AngularJS

Question

Ho cercato di caricare i dati all'interno di una finestra modale utilizzando AngularJS ma non sono sicuro di come farlo. Ho bisogno che l'url cambi anche quando il link viene cliccato e i dati da caricare all'interno di una finestra modale invece di caricare una nuova pagina.

Ho provato a utilizzare il plugin jQuery Facebox ma non sembra funzionare, sto anche utilizzando il componente modal di avvio di twitter.

Qui di seguito è il mio codice:

<div class="subnav span12" id="post-main-container" ng-controller="PostsController"> 
    <div class="btn-group pull-left span5" id="sort-nav"> 
    <a class="btn active">Popular</a> 
    <a class="btn">Recent</a> 
    <a class="btn">Favorite</a> 
    </div> 
    <div class="btn-group pull-right " id="view-nav"> 
    <a class="btn" id="2col"><i class="icon-th-large"></i></a> 
    <a class="btn active" id="4col"><i class="icon-th"></i></a> 
    <a class="btn" id="6col"><i class="icon-th-list"></i></a> 
    </div> 
    <div class="btn-group pull-right"> 
    <a id="reload" class="btn"><i class="icon-refresh"></i></a> 
    <a class="btn"><i class="icon-random"></i></a> 
    </div> 
    <div class="row-fluid span12" id="img-container"> 
    <ul class="unstyled" id="image-container"> 
     <li class="post-container box2" ng-repeat="post in posts"> 
     <div class="post-btns" style="display:none;"> 
      <a class="btn btn-mini" href="#">Share</a> 
      <a class="btn btn-mini" href="#">Add</a> 
     </div> 
     <a href="#/posts/{{post.id}}"> 
      <img ng-src="{{post.image}}"> 
     </a> 
     <p class="post-snippet" style="display:none;">{{post.description}}</p> 
     </li> 
    </ul> 
    </div> 
</div> 

voglio caricare il "#/posts/{{post.id}}" in una finestra modale.

Answer 1

Non sono sicuro se questo risolverà completamente il problema, ma abbiamo un wrapper direttiva del modal bootstrap su http://angular-ui.github.com/. Poiché stai definendo i tuoi div nella tua pagina, l'associazione dei dati bidirezionale dovrebbe funzionare. Per quanto riguarda il link dell'URL da modificare, non sono sicuro del perché lo si vorrebbe visto che si tratta di un controllo modale.

gruppo Angular-ui ha un sostituto angularjs dei js per modali e di alcuni altri controlli bootstrap vedere here

--dan

Answer 2

Il modo angolare viene vista guardando il modello e la modifica del modello:

• Inserire la finestra di dialogo nel markup.
• Associare il contenuto della finestra di dialogo a qualcosa come selectedPost.
• Fare clic sul collegamento cambia solo selectedPost e nascondere/mostrare la finestra di dialogo.

Ecco una versione molto rapida: http://plnkr.co/edit/0fsRUp?p=preview

Checkout Angular UI, hanno già un componente per la modali di Bootstrap.

Answer 3

Ecco il mio tentativo di fare delle direttive per questo.

http://jsfiddle.net/tadchristiansen/gt92r/

Speriamo che vi sia utile.

Answer 4

Se si utilizza il modale Twitter BootStrap, this jsfiddle mantiene separati i componenti Angolari, il che consente di creare un file html parziale con solo l'html del proprio modal e i binding opportunamente definiti.

Ciò significa che è possibile utilizzare un Angular directive dichiarativo nel tuo html:

<a my-popup-directive="partials/myModal.html">Open MyModal</a> 

Edit: Per @ di DanDoyon (corretto) commenti, la direttiva è stata rinominata per un non ng namespace. Aggiornamento: l'utilizzo di Bootstrap 3 modal con Angular 1.x rende praticamente inutile una direttiva personalizzata o angular-ui modal.