

Monacaを最近使い始めたものです。15年ぶりのプログラムなので隔世の感があります。  
さて、Monacaで提供されているRSSフィードサンプルをベースにSmartNewsっぽいものをつくるべくコーディングを試行錯誤しているのですが、知識が足りず、OnsenUI内にてJSを呼ぶことが出来ておりません。  
・起動時の画面描画までは成功  
・各記事をタップしたときにFeedを記述した関数にアクションが伝わっていない  
・下記Pull-hookにてFeedUが起動しない  
の部分にて煮詰まっております。  
の記述が違う等おそらく数行の間違いではないかと思っておるのですが、ご指摘いただければ幸いです。

よろしくお願いします。

**page1.html**

[code]

    <ons-page>
        <ons-toolbar>
            <div class="left">
                <ons-toolbar-button ng-click="app.slidingMenu.toggleMenu()"><ons-icon icon="bars"></ons-icon></ons-toolbar-button>
            </div>
            <div class="center">概況</div>
            <div class="right">
                <img src="Logo_h40.jpg" alt="" />
            </div>
        </ons-toolbar>
    
        <div id="mask">
          <div id="loading"><img src="animation.gif"></div>
        </div>
        <div id="feed-list">
        </div>
        <p id="error-message"></p>
        // 下記Pull-hookにてFeedUが走らず（画面生成時には走っている）
        <ons-pull-hook ng-action="$(feedU($done))" var="loader">
            <span ng-switch="loader.getCurrentState()">
                <span ng-switch-when="initial"><ons-icon size="35px" icon="ion-arrow-down-a"></ons-icon> 更新するにはプルダウンしてください</span>
                <span ng-switch-when="preaction"><ons-icon size="35px" icon="ion-arrow-up-a"></ons-icon> 手をはなしてください</span>
                <span ng-switch-when="action"><ons-icon size="35px" spin="true" icon="ion-load-d"></ons-icon> データを読み込んでいます...</span>
            </span>
        </ons-pull-hook>
    
    </ons-page>
    
    <script>
    // CHANGE YOUR URL HERE!
    var feedUrl = "http://etc.com/feed/";
    
    $(function($done) {
        var made = new Date();;
        //console.log(made.getTime());
        var feed = new Feed({
            url: feedURL
        });
        feed.load();
        //$done;
    
        if (monaca.isIOS) {
            $('.toolbar').css('margin-top', '20px');
            $('.button').css('top', '20px');
        } 
    });
    
    $(function feedU($done) {
        var made = new Date();;
        //console.log(made.getTime() + "feedU");
        var feed = new Feed({
            url: feedURL
        });
        feed.load();
        $done();
    });
    </script>
    
[/code]

**index.html**

[code]

    <head>
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
        <script src="components/loader.js"></script>
        <link rel="stylesheet" href="components/loader.css">
        <link rel="stylesheet" href="css/style.css">
        <script>ons.bootstrap();</script> 
        <script src="js/feed-reader.js"></script>
    </head>
    <body>
        <ons-sliding-menu var="app.slidingMenu" menu-page="menu.html" main-page="page1.html" side="left" type="overlay" max-slide-distance="200px">
        </ons-sliding-menu>
    </body>
    
[/code]


CC BY-SA 3.0
2015-08-31T01:26:07.357
15061
2016-10-28T10:49:15.633
2015-08-31T08:00:52.997
11143
11143
question
monaca onsen-ui
MonacaにてOnsenUI内でJSの起動方法


OnsenUIはAngularJSをベースにしています。  
RSSリーダーのサンプルはjQueryを使用しているため、同時に使うにはコツがいるように思います。

参考：「AngularJS jQuery」で検索した上位2件ですが・・・  
[AngularJS 製アプリで jQuery を使いたい](http://dev.classmethod.jp/client-
side/javascript/angularjsandjquery/)  
[angularJS と jQuery
に関する誤解を解く](http://d.hatena.ne.jp/nazoking/20150518/1431962894)

`ons-pull-hook`を使いたいのであれば、こちらをベースにカスタマイズしていった方がやりやすいかもしれません。

[プルフックを使う（OnsenUIの公式ガイドです）](http://ja.onsen.io/guide/overview.html#UsingPullHook)  
[公式ガイドのサンプルのソースコード（CodePen）](http://codepen.io/onsen/pen/WbJogM)


CC BY-SA 3.0
2015-09-01T14:24:04.833
15120
2015-09-01T14:24:04.833
3516
15061
answer


結論から言うと、OnsenUIにおけるページ遷移では、別のHTMLファイルへの遷移時に、そのファイル上のscriptは動かないようです。  
OnsenUIは、あくまでindex.html上で（他のファイル内の）ons-
pageの中身を表示しているだけだからというのがその理由です。（この辺りの正確なことはわかりませんが、経験上ではそんな感じです）

よって、対処法としては、

  * index.html上にscriptを書く
  * 別のJSファイルに書いて、index.htmlにて読み込む

などが、簡単で良いと思います。

なお、私はangular党でjQueryについては門外漢のため、jQueryでの実装方についてはわかりません。


CC BY-SA 3.0
2015-09-04T05:43:21.207
16227
2015-09-04T06:04:58.527
2015-09-04T06:04:58.527
9474
9474
15061
answer