0

私は4つのファイル
index.html
page1.html
page2.html
page3.htmlを持っています

これが私のコードです...

page3.html

<ons-page>
<ons-tabbar>
  <ons-tab page="home.html" active="true">
    <ons-icon icon="ion-home"></ons-icon>
    <span style="font-size: 14px">Home</span>
  </ons-tab>
  <ons-tab page="favo.html" active="true">
    <ons-icon icon="ion-star"></ons-icon>
    <span style="font-size: 14px">Favorite</span>
  </ons-tab>
  <ons-tab page="settings.html" active="true">
    <ons-icon icon="ion-social-twitter"></ons-icon>
    <span style="font-size: 14px">Bird</span>
  </ons-tab>
</ons-tabbar>



<ons-template id="home.html">
  <p>Green home</p>
  <p>White home</p>
  <p>Pink home</p>
</ons-template>

<ons-template id="favo.html">
  <p>Your favorite music.</p>
  <p>Your favorite food.</p>
  <p>Your favorite toy.</p>
  <p>Your favorite snack.</p>
</ons-template>

<ons-template id="settings.html" >
  <div  ng-app="magic_land"  >
  <div   ng-controller="morning">
      <p> Cindy, {{greetings}} </p>
      <p> Alice, {{greetings}} </p>
      <p> Jessica, {{greetings}} </p>
      <p> {{2+8}} </p>
  </div>
  </div>
</ons-template>

</ons-page>

なぜこのエラーが発生するのですか?

Error: Page is not found: favo.html

その後、これに交換しました...

<ons-template id="favo.html">
  <p>Your favorite music.</p>
  <p>Your favorite food.</p>
  <p>Your favorite toy.</p>
  <p>Your favorite snack.</p>
</ons-template>

<ons-template id="home.html">
  <p>Green home</p>
  <p>White home</p>
  <p>Pink home</p>
</ons-template>

<ons-template id="settings.html" >
  <div  ng-app="magic_land"  >
    <div   ng-controller="morning">
        <p> Cindy, {{greetings}} </p>
    </div>

    <div   ng-controller="afternoon">
        <p> Cindy, {{greetings}} </p>
    </div>

    <div   ng-controller="evening">
        <p> Cindy, {{greetings}} </p>
    </div>
  </div>
</ons-template>

今、このエラーが発生しています...

Page is not found: home.html

2番目の位置は呪われているようです。

...................................................
... ………………………………
_ ...................................................

その他のファイルはこちら。

index.html

<!DOCTYPE HTML>
<html ng-csp>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="components/loader.js"></script>
    <script src="js/winstore-jscompat.js"></script>
    <link rel="stylesshet" href="components/monaca-onsenui/js/angular/angular-csp.css">
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script>
        //ons.bootstrap();

        var magic_land = ons.bootstrap('magic_land', ['onsen']);

        magic_land.controller
        (
          "morning" ,
          function($scope)
          {
            $scope.greetings = "Rise and shine!" ;
          }
        ) ;

        magic_land.controller
        (
          "afternoon" ,
          function($scope)
          {
            $scope.greetings = "Good afternoon!" ;
          }
        ) ;

        magic_land.controller
        (
          "evening" ,
          function($scope)
          {
            $scope.greetings = "Good night. Sleep well." ;
          }
        ) ;

    </script>
</head>
<body>
    <ons-navigator var="captain" page="page3.html">
    </ons-navigator> 
</body>
</html>

...................

page1.html

<ons-page>
<ons-scroller>

    <ons-toolbar>
        <div class="center">This is page ONE</div>
    </ons-toolbar>

    <div style="text-align: center">
        <br>
        <ons-button
            ng-click="captain.pushPage('page3.html')">
            Push It
        </ons-button>
        <br>

        <ons-list>
          <ons-list-header>Fruits</ons-list-header>
          <ons-list-item>Apple</ons-list-item>
          <ons-list-item>Banana</ons-list-item>
          <ons-list-item> {{5+5}} </ons-list-item>
        </ons-list>

        <br>

        Party <ons-switch checked></ons-switch>
    </div>

</ons-scroller>
</ons-page>

...................................

page2.html

<ons-page>
    <ons-toolbar>
        <div class="left"><ons-back-button>Backware</ons-back-button></div>
        <div class="center">You are in Page TWO</div>
    </ons-toolbar>

    <div style="text-align: center">

        <h1>Hello there!</h1>
        <ons-button
            ng-click="captain.popPage()">
          Pop Corn {{5+5}}
        </ons-button>

    </div>
</ons-page>



解決策が見つかりませんでした。しかし、私は回避策を見つけました。
私が言ったように、2 番目と 4 番目のテンプレートは呪われています。ということで、dummy_1とdummy_2を作って呪いを解いてみました。
^_^ . それはスマイリーです！

page3.html を以下のように変更します。

page3.html (workaround)

<body>
<ons-page>

<ons-tabbar>
  <ons-tab page="home.html" active="true">
    <ons-icon icon="ion-home"></ons-icon>
    <span style="font-size: 14px">Home</span>
  </ons-tab>
  <ons-tab page="favo.html" active="true">
    <ons-icon icon="ion-star"></ons-icon>
    <span style="font-size: 14px">Favorite</span>
  </ons-tab>
  <ons-tab page="settings.html" active="true">
    <ons-icon icon="ion-social-twitter"></ons-icon>
    <span style="font-size: 14px">Bird</span>
  </ons-tab>
</ons-tabbar>

</ons-page>

<ons-template id="favo.html">
  <p>Your favorite music.</p>
  <p>Your favorite food.</p>
  <p>Your favorite toy.</p>
  <p>Your favorite snack.</p>
</ons-template>

<ons-template id="dummy_1.html">
  <p></p>
</ons-template>

<ons-template id="home.html">
  <p>Green home</p>
  <p>White home</p>
  <p>Pink home</p>
</ons-template>

<ons-template id = "dummy_2">
  <p></p>
</ons-template>

<ons-template id="settings.html" >
  <div  ng-app="magic_land"  >
    <div   ng-controller="morning">
        <p> Cindy, {{greetings}} </p>
    </div>

    <div   ng-controller="afternoon">
        <p> Cindy, {{greetings}} </p>
    </div>

    <div   ng-controller="evening">
        <p> Cindy, {{greetings}} </p>
    </div>
  </div>
</ons-template>


</body>



これが実際のタブです。GIF ビデオとして表示されます。
http://postimg.org/image/vin7bak3x/

4

2 に答える 2

0

<ons-template>問題は、タグをタグの中に入れていることだと思います<ons-page>。

代わりに、本文にテンプレートを配置してみてください。

<body>
  <ons-tabbar>
    ...
  </ons-tabbar>

  <ons-template id="favo.html">
    ...
  </ons-template>

  <ons-template id="home.html">
    ...
  </ons-template>

  ...
</body>
于 2015-09-04T02:50:42.987 に答える