Creating a modal window to load data with AngularJS

Question

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.

Dan Doyon · Accepted Answer · 2013-02-20 18:28:56Z

7

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

edited Feb 20, 2013 at 18:28

answered Jul 26, 2012 at 21:07

Dan Doyon

6,7302 gold badges33 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Riko Over a year ago

Why wouldn't you want to facilitate a deep link directly into a modal? Trello.com does this and it is very useful.

Dan Doyon Over a year ago

Modals, well, are modals. In my experience, a modal is shown based on a user's action. I know of one use case, which I've used and that is authentication, which even then, the modal is shown based on user's action of going to unauthenticated page. In the wild world of the web standards change pretty fast. I'll take a look at Trello.com

Community · Accepted Answer · 2015-06-09 13:30:13Z

6

The Angular way is view watching the model and you changing the model:

Put the dialog into the markup.
Bind content of the dialog to something like selectedPost.
Clicking the link only change selectedPost and hide/show the dialog.

Here is a very quick version: http://plnkr.co/edit/0fsRUp?p=preview

Checkout Angular UI, they already have a component for Bootstrap's modal.

edited Jun 9, 2015 at 13:30

CommunityBot

11 silver badge

answered Aug 3, 2012 at 1:00

Vojta

23k5 gold badges51 silver badges46 bronze badges

1 Comment

jcollum Over a year ago

I think your plunkr is dead.

JJ Zabkar · Accepted Answer · 2013-12-17 18:50:50Z

4

If you happen to be using Twitter BootStrap's modal, this jsfiddle keeps the Angular components separate, which allows you to create a partial html file with only your modal's html and properly scoped bindings.

This means you can use an Angular directive declaratively in your html:

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

Edit: Per @DanDoyon's (correct) comment, the directive was renamed to a non-ng namespace. Update: Using a Bootstrap 3 modal with Angular 1.x makes a custom directive or angular-ui modal pretty much unnecessary.

edited Dec 17, 2013 at 18:50

answered Oct 31, 2012 at 22:50

JJ Zabkar

3,7197 gold badges50 silver badges66 bronze badges

2 Comments

Dan Doyon Over a year ago

Just to be clear for those reading, ng-popup is not an angular directive. Using ng for namespace is not incorrect but does imply that its from the core library.

Michael J. Calkins Over a year ago

I've taken a version of this and am building upon it: github.com/clouddueling/angularjs-modals

testing123 · Accepted Answer · 2012-08-18 05:20:47Z

2

Here's my attempt to make directives for it.

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

Hopefully you find it useful.

answered Aug 18, 2012 at 5:20

testing123

11.5k10 gold badges50 silver badges66 bronze badges

Collectives™ on Stack Overflow

Creating a modal window to load data with AngularJS

4 Answers 4

2 Comments

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related