Howto open a popup when using $routeProvider?

[mlegenhausen]

http://jsfiddle.net/ZHKBA/91/

When I am using it like this I get an error. Any advice? I want also to open the popup programatically via an ng-click method call.

[caseman72]

I created a function to do it - we load the html from a get request - so it takes a string (not what you are asking for but it does the job):

http://jsfiddle.net/ZHKBA/92/

[caseman72]

This is a little cleaner if you allow JQM to init the popup in the content div: http://jsfiddle.net/4mv56/

[tbosch]

Hi, popups need to be declared inside the page that uses the popup, and they cannot be loaded using AJAX. This is a restriction by jqm. To open a popup, right now you have to have an <a data-rel="popup" id="somePopupId"> and the user has to click on that link. The adapter does not yet support a way to programmatically open the popup, you are right.

I will add this, so you are able to open a popup using $location.hash("myPopupId"). However, routes for popups or loading popups using ajax will not be possible due to the limitations of jqm.

Would this help?

Tobias

[caseman72]

We do it - but you have to init them with .popup().popup('open") but it's a little hacky. One thing, I had to alter this code to prevent redirecting to /&ui-state=dialog when a popup is active and the browser back button is pressed - hard to show on jsfiddle:

function startNavigation() {
    $.mobile.changePage(url, navConfig);
    if ($.mobile.popup.active) {
        // Popup are available without loading,
        // so we can check them right after calling $.mobile.changePage!
        // dialogUrl(true);
        $.mobile.popup.active.close();
    }
}

[mlegenhausen]

I find it much more intuitive to open the popup via a method instead by an id and the route.

[tbosch]

Hi, I thought about this. For the collapsible widget, we already have a data-collapsed databinding attribute, with which you can open/close the widget using databinding programmatically. What do you think about a new data-opened attribute on popups with databinding? By this, you can read out the current opened state in your controller, and are also able to change it without a direct access to jQuery.

E.g.

<div data-role="popup" data-opened="opened">Hello</div>

<button ng-click="opened=true">Open Popup</button>
Current state: {{opened}}

Tobias

[mlegenhausen]

That would be nice. Would it be possible to use the same controller as for the button?

[tbosch]

Yes!

[marcorinck]

That looks REALLY nice! Can't wait for that.

[tbosch]

Hello, here is an example of the new data-opened attribute for popups: http://jsfiddle.net/ZHKBA/101/

Tobias