1

環境:Moanca for Visual Studio
Cordova 4.1.0
ONSEN UI 1.2.1
AngularJS: 1.3.0(ONSEN UI標準組み込み)
Android MonacaDebugger 3.2.0

サンプルのOnsen UI ナビ付 タブバーを元に以下のようなコードを書いていますが、ons-navigatorのデフォルトページpage1.html内部の#btnShowArchivesを取得するにはどうしたらいいでしょうか

index.html

<body>
    <ons-tabbar var="tabbar">
        <ons-tab
            icon="home"
            label="Home"
            page="navigator.html"
            active="true"></ons-tab>
        <ons-tab
            icon="gear"
            label="Settings"
            page="settings.html"></ons-tab>
    </ons-tabbar>
</body>

navigator.html

<ons-navigator var="myNavigator" page="page1.html">
</ons-navigator> 

page1.html

<ons-button id="btnShowArchives" >
    Shuffle phone or push this button
</ons-button>

ここで、index.htmlから読み込んでいるmain.jsファイルに以下のようなコードを書いても反応しません。

document.addEventListener("deviceready", function () {
    var btnShowArchives = ons.findComponent('#btnShowArchives', document.body);
    btnShowArchives.on("click", function (event) {
        console.log('test');
    });
}, false);

以下の方法も試してみましたがエラーが出ます。

document.addEventListener("deviceready", function () {
    var btnShowArchives = document.getElementById("btnShowArchives");
    //error
    btnShowArchives.on("click", function (event) {
        console.log('test');
    });

}, false);

ons-navigatorのページ追加イベントを使うのかとも思いましたがこれも反応しません。

myNavigator.on("postpush", function (event) {
    console.log(event);
});

これに限らずOnsen UIのons-tabbarなどの複数ページ管理UIで、index.html以外に書かれてるオブジェクトの取得方法がいまいちわかりません(サンプルアプリにも載ってない)。

以上、よろしくお願いします。

2 件の回答 2

1
ons.ready(function(){
  tabbar.on('postchange', function(e){
    if(e.index === 0){
      myNavigator.on('postpush', function(e){
        if(e.enterPage.name === 'page1.html'){
          var btnShowArchives = angular.element(document.getElementById('btnShowArchives'));
          btnShowArchives.on('click', function(){
            alert("clicked");
          });
        }
      });
    }
  });
});

試しにやってみました。こうすれば一応取得できます。ただし階層が深くなるのでスマートではないですね。

複数ページを管理するときはAngularJSを使うと簡潔に書けますので、そちらも検討されてみてはいかがでしょうか。
http://ja.onsen.io/guide/overview.html#UsingOnsenUIwithAngularJS

1
  • URLを参考にできたので回答を投稿しました。
    – Lamron
    Commented 2015年2月25日 13:08
1

citherさんの回答から以下のページを見たところ次のようにすればいいことがわかりました。

http://ja.onsen.io/guide/overview.html#UsingOnsenUIwithAngularJS

page1.html

<div ng-controller="PageController"><!-- ng-controller属性を指定する -->
    <ons-button id="btnShowArchives">
        Shuffle phone or push this button
    </ons-button>
</div>

main.js

var module = ons.bootstrap('my-app', ['onsen']);
//ng-controller属性で指定した文字列
module.controller('PageController', function ($scope) {
    ons.ready(function () {
        var btnShowArchives = $('#btnShowArchives');
        btnShowArchives.on("click", function (event) {
            console.log('test');
        });
    });
});

こちらの質問( ONSEN UI + JQueryのタブ切り替え時のons.readyとscriptについて ) の方も同じような問題にぶつかってますがAngularJS必須なら必須と書いて欲しいところです。

Onsen UIは同じCordova向けフレームワークのIonicと比べてjQueryが使えてドキュメントが充実してそうに見えたから選んだんですが、この分だとIonicも再検討した方がいいかもしれません。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。