AngularJS-translation icon indicating copy to clipboard operation
AngularJS-translation copied to clipboard

Published 20 hours ago • verified publisher icon aztack

HowTo - Use jQuery Mobile UI part with Angular Routing?

Open aztack opened this issue 12 years ago • 0 comments 

<!DOCTYPE html>
<html>
<head>
    <title><%= site_title %></title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <%= stylesheet_link_tag    "application", :media => "all" %>
    <link rel="stylesheet" href="/jquery.mobile-1.3.1.min.css" />
    <script src="/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
        //disable jqm routing
        $(document).bind('mobileinit', function(){
            $.extend( $.mobile , {
                linkBindingEnabled: false,
                hashListeningEnabled:false
            });
        } );
    </script>
    <style>
        /* show page by default */
        .ui-mobile [data-role=page]{
            display:block;
        }
    </style>
    <script src="/jquery.mobile-1.3.1.js"></script>
    <!-- load angular after jquery & jqm -->
    <script src="/angular.js"></script>
</head>
    <body ng-app="app">
        <div class="container" ng-view></div>
    </body>
</html>

place your Angluar template files in /template/*.html

appModule.directive('jqmPage',function(){
        return {
            link: function(scope,element){
                //call .page on page element when element dom is ok
                element.page();
            }
        };
    })

<div data-role="page" jqm-page> ... </div>

aztack avatar May 14 '13 07:05 aztack