Creating a modal window to load data with AngularJS

angularjs, javascript

Solution

Not sure if this will completely solve your problem but we have a directive wrapper of the bootstrap modal on http://angular-ui.github.com/. Because you are defining your divs in your page, the two-way data binding should just work. In regards to the url link to change, I'm not sure why you would want this since this is a modal control.

Angular-ui group has an angularjs replacement of the js for modal and some other bootstrap controls see here

--dan

Problem

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. I have tried using the jQuery Facebox plugin but it doesnt seem to work, I'm also using the twitter bootstrap modal component. Below is my code: ``` <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> ``` I want to load the `"#/posts/{{post.id}}"` in a modal window.

Original source