Databases
StackOverflow2013
Postsdbo
POCreating a modal window to load data with AngularJS
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCreating a modal window to load data with AngularJS
    text
    copied!<p>I've been trying to load data inside a modal window using AngularJS but I'm not sure how to do that. I need the url also to change when the link is clicked and the data to load inside a modal window instead of loading a new page.</p> <p>I have tried using the jQuery Facebox plugin but it doesnt seem to work, I'm also using the twitter bootstrap modal component.</p> <p>Below is my code:</p> <pre><code>&lt;div class="subnav span12" id="post-main-container" ng-controller="PostsController"&gt; &lt;div class="btn-group pull-left span5" id="sort-nav"&gt; &lt;a class="btn active"&gt;Popular&lt;/a&gt; &lt;a class="btn"&gt;Recent&lt;/a&gt; &lt;a class="btn"&gt;Favorite&lt;/a&gt; &lt;/div&gt; &lt;div class="btn-group pull-right " id="view-nav"&gt; &lt;a class="btn" id="2col"&gt;&lt;i class="icon-th-large"&gt;&lt;/i&gt;&lt;/a&gt; &lt;a class="btn active" id="4col"&gt;&lt;i class="icon-th"&gt;&lt;/i&gt;&lt;/a&gt; &lt;a class="btn" id="6col"&gt;&lt;i class="icon-th-list"&gt;&lt;/i&gt;&lt;/a&gt; &lt;/div&gt; &lt;div class="btn-group pull-right"&gt; &lt;a id="reload" class="btn"&gt;&lt;i class="icon-refresh"&gt;&lt;/i&gt;&lt;/a&gt; &lt;a class="btn"&gt;&lt;i class="icon-random"&gt;&lt;/i&gt;&lt;/a&gt; &lt;/div&gt; &lt;div class="row-fluid span12" id="img-container"&gt; &lt;ul class="unstyled" id="image-container"&gt; &lt;li class="post-container box2" ng-repeat="post in posts"&gt; &lt;div class="post-btns" style="display:none;"&gt; &lt;a class="btn btn-mini" href="#"&gt;Share&lt;/a&gt; &lt;a class="btn btn-mini" href="#"&gt;Add&lt;/a&gt; &lt;/div&gt; &lt;a href="#/posts/{{post.id}}"&gt; &lt;img ng-src="{{post.image}}"&gt; &lt;/a&gt; &lt;p class="post-snippet" style="display:none;"&gt;{{post.description}}&lt;/p&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>I want to load the <code>"#/posts/{{post.id}}"</code> in a modal window.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload