6240


お世話になります。

環境：MoancaIDE / Chrome 最新版  
Cordova 4.1.0  
ONSEN UI 1.2.1  
AngularJS: 1.3.0(ONSEN UI標準組み込み）  
JQuery MonacaVer 2.0.3  
iOS MonacaDebugger 3.2.0

■やりたいこと  
タイトル通りなのですが、初回起動時にはサービス利用の同意画面を出したいと考えています。  
アプリの仕様としては  
・アプリダウンロード後、初回起動時には同意画面を出す（タブバーは非表示）  
・2回目以降はタブバーが下部に表示され、タブバー要素の0番目が表示される

※ちなみに初回起動と2回目の判定にはlocalStorageを使用しキャッシュさせるように考えています。  
キャッシュの仕組み自体はできています。

■試したこと  
公式サンプルではタブバーがデフォルトで表示されている状態のため、下記のようにしてみましたが正しい書き方なのかわからないのと、良い方法があればお聞きしたいです。

[code]

    <body onload="onload()" ng-controller="initController" ng-init="init()">
    <ons-navigator var="MyNavi" page="start.html"></ons-navigator>
    
    <ons-tabbar class="tabNavi" ng-show="false">
        <ons-tab label="トップ"        page="home_navi.html"       icon="ion-home" active="true"></ons-tab>
        <ons-tab label="マイページ"  page="mypage_navi.html"     icon="ion-coffee"></ons-tab>
    </ons-tabbar>
    
    <ons-modal var="modal" class="modal type3" id="modal">
        <ons-icon icon="ion-load-d" spin="true" style="font-size:32px;"></ons-icon>
        <div class="txt">読み込み中</div>
    </ons-modal>
    
[/code]

少なくともこの状態であればstart.htmlが呼ばれており、「初回起動時の画面」は実現できています。  
しかし2回目以降はstart.html読み込みはスキップし、ng-show="false"にしているtabberを表示させたいのですが方法がわかりません。

よろしくお願いします。


CC BY-SA 3.0
2015-02-09T11:06:58.387
6189
2015-02-24T14:52:48.637
7852
question
javascript monaca angularjs onsen-ui
AngularJS+ONSEN UI（tabbar）で初回起動とそうでない場合に出し分けをしたい


初回起動でないなら起動時にトップページへ遷移すれば良いのではないでしょうか？  
ただし、起動時に一瞬でも同意画面を見せたくないのであれば  
スプラッシュを手動で消すようにし、  
タブページ(トップページ)をロード時にスプラッシュを非表示にすれば良いかと思います。  
以下localStorageを使用すると書いてありましたが、コードが無かったので勝手にKey名を指定しています。

[code]

    function onload(){
     //前回の値を読み込み
     var isOpen = localStorage.getItem("isOpen");
     //値が保存されていない、もしくはフラグがオフだった場合
     if(null == isOpen || 0 == isOpen){
      //スプラッシュ削除
      navigator.splashscreen.hide();
      //初回起動終了フラグをオンにする。
      localStorage.setItem("isOpen", "1");
     }else{
      //初回ではないのでトップを開く
      //トップのスコープからオンロード取得時にスプラッシュ削除
      MyNavi.pushPage("top_tab.html");
     }
    }
[/code]

[code]

    <body onload="onload()" ng-controller="initController" ng-init="init()">
     <ons-navigator var="MyNavi" page="start.html"></ons-navigator>
     
     <ons-modal var="modal" class="modal type3" id="modal">
         <ons-icon icon="ion-load-d" spin="true" style="font-size:32px;"></ons-icon>
         <div class="txt">読み込み中</div>
     </ons-modal>
    </body>
    
    
    <!--
    [top_tab.html]
    
    <ons-page ng-controller="tabs_control">
     <ons-tabbar class="tabNavi">
         <ons-tab label="トップ"        page="home_navi.html"       icon="ion-home" active="true"></ons-tab>
         <ons-tab label="マイページ"  page="mypage_navi.html"     icon="ion-coffee"></ons-tab>
     </ons-tabbar>
    </ons-page>
    -->
[/code]


CC BY-SA 3.0
2015-02-10T06:46:42.633
6240
2015-02-10T06:46:42.633
7676
6189
answer