Re: Loading content in a modal window with angular.js

[Michael Bielski]

Hi Garry,

That's pretty darn slick! Thank you very much for sharing! I'm still pretty new to Angular so I have just one question: I've already got an app defined for my page, so how would I go about adding this one to it?

On Monday, June 25, 2012 6:57:31 AM UTC-7, Garry Newman wrote:

Here's my code for exactly this:

http://codepad.org/6kXZApxD

I use it like this

<span ng-modal-url="'/template_page_url_to_open.html'">Link</span>

Your template page can be wrapped in a controller and it should work as you'd expect (even inheriting from the scope where the link was)

Code also includes this confirm modal..

<button ng-confirm="'Do you really want to delete this?'" ng-on-confirm="Delete()" ng-title="'Confirm Deletion'" ng-text-confirm="'Yes - please delete this'">Delete</button>

You can open a modal from code too..

$bsModal.Get( strURL, options, $scope );

Hope this helps, I don't really know how `compliant` my code is - but it works for me.

garry

On Monday, 25 June 2012 05:07:39 UTC+1, Hilaal Agil wrote:

i've been trying to load data inside a modal window using angular.js but i am 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 am also using the twitter bootstrap modal component.

can anybody help?

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.

[Tad Christiansen]

Thanks for sharing Garry. In case you find it useful, here is my version of what you did. If anyone has any feedback please share, I am fairly new to angular so there may be things I could do to improve this:

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

[Will Kriski]

I have a modal working using angular-ui which uses the bootstrap modal. It loads a value from the controller. Here's the jsfiddle:

http://jsfiddle.net/willkriski/4GNBd/26/

[Michael Calkins]

For future readers I will be maintaining a version of this here: https://github.com/clouddueling/angularjs-modals

I found it did the work I needed to do with modals better than ui-bootstrap.

[Pieter Herroelen]

Can I conclude from this thread that using an ng-include inside a modal directive (from ui-bootstrap) will not work?

Thanks in advance,

Pieter

[Pieter Herroelen]

My attempt is not working anyway:

http://plnkr.co/edit/dlY03GObsiAtEymDaxeV

Anybody with any ideas why?

[Pieter Herroelen]

Does anybody have a clue why this doesn't work? 

I'm noticing some very strange behavior:

- When line 24 (with the ng-include) is there, the button doesn't do anything

- When I remove line 24 , then it works (I click the button and it opens the dialog).

- When I move line 24 as a direct child of the body element, the include works

- When I keep line 24 as it is AND copy line 24  as a direct child of the body element. The include inside the dialog works as intended.

I'm clueless. Does anybody have an explanation?

Thanks in advance,

Pieter