

プッシュページでリンク先へスライド表示したいのですが上手く行きません。(ページ遷移しない)  
logは吐き出されているので処理自体は通っている様なのですが、pushpageの書き方におかしいところは有りますでしょうか？

[code]

    (function() {
        
        var isAndroid = navigator.userAgent.indexOf('Android') != -1;
    
    //--------01
        $(document).on('click', '#homenews', function() {
            console.log('homenews clicked');
            index.navi.pushPage('sample.html', { animation: 'Slide Reveal Left' });
        });
    
    //--------02
        $(document).on('click', '#homecalendar', function() {
            console.log('homecalendar clicked');
            index.navi.pushPage('index.html', { animation: 'Slide Reveal Left' });
        });
        
    //--------03
        $(document).on('click', '#homelibrary', function() {
            console.log('homelibrary clicked');
            index.navi.pushPage('index.html', { animation: 'Slide Reveal Left' });
        });
    
    //--------04
        $(document).on('click', '#homelinks', function() {
            console.log('homelinks clicked');
            index.navi.pushPage('sample.html', { animation: 'Slide Reveal Left' });
        });
        
    })();
[/code]

[code]

    <!DOCTYPE HTML>
    <html ng-app="myApp">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes">
        <meta name="format-detection" content="telephone=no">
        <script src="components/loader.js"></script>
        <script src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    
        <script src="js/angular-sanitize.min.js"></script>
        <script src="js/index.js"></script>    
    
        <script src="js/jquery-1.11.0.min.js"></script>
        <script src="js/jquery.glide.min.js"></script>
        <link rel="stylesheet" href="components/loader.css">
        <link rel="stylesheet" href="css/onsen-css-components/onsen-css-components.min.css">
        <link rel="stylesheet" href="css/index.css">
    
    
    
        <script>
        </script>
            
    </head>
    
    <body>
        <ons-page id="index-list-page">
            
            <div class="logo" style="width:50%; position: absolute; left: 10px; bottom: 190px;">
                <img id="img-logo" src="img/logo_1.png" style="width:100%;"  >
            </div>
            
    
            <ons-list class="index-list">        
    <!-- 1-->
                <ons-list-item modifier="chevron" class="index-item" style="height: 10px;" >
                    <div id="homenews">
                        <span class="index-item-title" style="height: 10px;"><i class="fa fa-rss" style="color: #ffffff;"></i> 
                        &nbsp;&nbsp;News</span>
                    </div>                          
                </ons-list-item>
    
    <!-- 2-->
                <ons-list-item modifier="chevron" class="index-item">
                    <div id="homecalendar">
                        <span class="index-item-title"><i class="fa fa-calendar" style="color: #ffffff;"></i> 
                        &nbsp;&nbsp;Calendar        
                        </span>
                    </div>                                        
                </ons-list-item>
    
    <!-- 3-->    
                <ons-list-item modifier="chevron" class="index-item">
                    <div id="homelibrary">
                        <span class="index-item-title"><i class="fa fa-book" style="color: #ffffff;"></i> 
                        &nbsp;&nbsp;Library
                        </span>
                    </div>                                        
                </ons-list-item>
    
    <!-- 4-->    
                <ons-list-item modifier="chevron" class="index-item">
                    <div id="homelinks">
                        <span class="index-item-title"><i class="fa fa-globe fa-lg" style="color: #ffffff;"></i>
                        &nbsp;Web&Links
                        </span>
                    </div>
                </ons-list-item>
                
            </ons-list>
        </ons-page>
    </body>
    
    </html>
[/code]


CC BY-SA 3.0
2015-03-17T08:42:15.663
8015
2015-03-18T04:44:26.100
7724
question
monaca
pushpageイベントに着火しない


やり方が違いますが、これではだめですか？

[code]

    <head>
        <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/onsenui.css" rel="stylesheet"/>
        <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/onsen-css-components.css" rel="stylesheet"/>
        <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/js/angular/angular.min.js"></script>
        <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/js/onsenui.min.js"></script>
        <script>
            ons.bootstrap();
        </script>
    </head>
    <body>
        <ons-navigator var="navi">
            <ons-page id="index-list-page">
                <div class="logo" style="width:50%; position: absolute; left: 10px; bottom: 190px;">
                    <img id="img-logo" src="img/logo_1.png" style="width:100%;"  >
                </div>
        
                <ons-list class="index-list">        
        <!-- 1-->
                    <ons-list-item modifier="chevron" class="index-item" style="height: 10px;" ng-click="navi.pushPage('page1.html', { animation: 'slide' });">
                        <div id="homen">
                            <span class="index-item-title" style="height: 10px;"><i class="fa fa-rss" style="color: #ffffff;"></i> 
                            &nbsp;&nbsp;list1</span>
                        </div>                          
                    </ons-list-item>
        <!-- 2-->
                    <ons-list-item modifier="chevron" class="index-item" ng-click="navi.pushPage('page1.html', { animation: 'lift' });">
                        <div id="homec">
                            <span class="index-item-title"><i class="fa fa-calendar" style="color: #ffffff;"></i> 
                            &nbsp;&nbsp;list2        
                            </span>
                        </div>                                        
                    </ons-list-item>
        <!-- 3-->    
                    <ons-list-item modifier="chevron" class="index-item" ng-click="navi.pushPage('page1.html', { animation: 'fade' });">
                        <div id="homel">
                            <span class="index-item-title"><i class="fa fa-book" style="color: #ffffff;"></i> 
                            &nbsp;&nbsp;list3
                            </span>
                        </div>                                        
                    </ons-list-item>
        <!-- 4-->    
                    <ons-list-item modifier="chevron" class="index-item" ng-click="navi.pushPage('page1.html', { animation: 'none' });">
                        <div id="homel">
                            <span class="index-item-title"><i class="fa fa-globe fa-lg" style="color: #ffffff;"></i>
                            &nbsp;list4
                            </span>
                        </div>
                    </ons-list-item>      
                </ons-list>
            </ons-page>
        </ons-navigator> 
    
      <ons-template id="page1.html">
        <ons-page>
          <ons-toolbar>
            <div class="left"><ons-back-button>Back</ons-back-button></div>
            <div class="center">Page1</div>
          </ons-toolbar>
          <div style="text-align: center; margin-top: 100px;">
            <ons-button modifier="light" onclick="navi.popPage()">
              Pop Page
            </ons-button>
          </div>
        </ons-page>
      </ons-template>
    
    </body>
[/code]


CC BY-SA 3.0
2015-03-17T11:59:56.647
8025
2015-03-18T01:34:25.207
2015-03-18T01:34:25.207
7724
3516
8015
answer