

ons-tabbarでタブバーを実装を以下のように組んだとき

[code]

    <ons-tabbar var="tabbar" ng-controller="MainCtrl">
            <ons-tabbar-item
                var="tab1"
                icon="home"
                label="売上"
                page="page1.html"
                active="true"></ons-tabbar-item>
            <ons-tabbar-item
                icon="heart"
                label="お客様一覧"
                page="page2.html"></ons-tabbar-item>
            <ons-tabbar-item
                icon="star"
                label="ランキング"
                page="page3.html"></ons-tabbar-item>
            <ons-tabbar-item
                icon="gear"
                label="設定"
                page="page4.html"></ons-tabbar-item>
        </ons-tabbar>
    
[/code]

たとえば、「お客様一覧」を選択し、page2.htmlを表示したときにDBを読み込んでその内容を表示させたい場合どのようにすればいいでしょうか。

page2.htmlにJavaScriptで処理を行っているのですが、実際は処理は行われていません。  
readyで処理を実行するよう組んでいるのですが、それでも処理が行われません。  
（すでに読み込まれていることになっている？）

ng-controller="MainCtrl"でもやってみましたが、初回起動時しか行われず、想定とは異なる処理になっています。


CC BY-SA 3.0
2015-07-29T03:38:47.437
12784
2016-09-12T03:57:16.193
10714
question
monaca
ons-tabbarでページを切り替えたときの処理について


`ons-tabbar`に`prechange` `postchange`といったイベントがあるので、  
その辺で処理を書けば想定している動きが実現できると思います。

詳細は[こちら（リファレンス）](http://ja.onsen.io/reference/ons-tabbar.html#events-
summary)をご参照ください

[code]

    ons.bootstrap();
    
    function fadeout() {
      $("#modal").fadeOut(1000, function() {
        modal.hide();
      });
    }
    
    ons.ready(function() {
      // タブが変わる前
      tab.on('prechange', function(event) {
        $('#page').text(event.tabItem.label);
        modal.show();
      });
      // タブが変わった後
      tab.on('postchange', function(event) {
        var page = event.tabItem.label;
        $('.content').text(page + ' Page Contents');
        setTimeout('fadeout()', 500);
      });
    });
[/code]

[code]

    <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsenui.css" rel="stylesheet"/>
    <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsen-css-components.css" rel="stylesheet"/>
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/angular/angular.min.js"></script>
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/onsenui.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <ons-tabbar var="tab">
      <ons-tab page="home.html" label="Home" icon="ion-home" active="true"></ons-tab>
      <ons-tab page="comments.html" label="Comments" icon="ion-chatbox-working"></ons-tab>
      <ons-tab page="tags.html" label="Tags" icon="ion-ios-pricetag"></ons-tab>
      <ons-tab page="settings.html" label="Settings" icon="ion-ios-cog"></ons-tab>
    </ons-tabbar>
    
    <ons-template id="home.html">
      <ons-toolbar>
        <div class="center">Home</div>
      </ons-toolbar>
      
      <p style="padding-top: 50px; color: #999; text-align: center" class="content"></p>
    </ons-template>
    
    <ons-template id="comments.html">
      <ons-toolbar>
        <div class="center">Comments</div>
      </ons-toolbar>
      
      <p style="padding-top: 50px; color: #999; text-align: center" class="content"></p>
    </ons-template>
    
    <ons-template id="tags.html">
      <ons-toolbar>
        <div class="center">Tags</div>
      </ons-toolbar>
      
      <p style="padding-top: 50px; color: #999; text-align: center" class="content"></p>
    </ons-template>
    
    <ons-template id="settings.html">
      <ons-toolbar>
        <div class="center">Settings</div>
      </ons-toolbar>
      
      <p style="padding-top: 50px; color: #999; text-align: center" class="content"></p>
    </ons-template>
    
    <ons-modal var="modal" id="modal">
      <ons-icon icon="ion-load-c" spin="true"></ons-icon>
      <br><br>
      Loading <span id='page'></span> Page.
      <br><br>
      Please wait.
    </ons-modal>
[/code]


CC BY-SA 3.0
2015-07-29T06:29:32.077
12790
2015-07-29T06:49:09.577
2015-07-29T06:49:09.577
3516
3516
12784
answer