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

第二个位置似乎被诅咒了。

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

这是其他文件。

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>



没有找到解决办法。但我找到了解决方法。
正如我所说，第二个和第四个模板被诅咒了。所以，我创建了 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 回答
0

这是我在设置页面时所拥有的拆分视图的确切语法。希望语法对单个页面有所帮助。这对我很有效

    <ons-split-view
        var="app.splitView"
        secondary-page="secondary.html"
        main-page="page1.html"
        main-page-width="40%"
        collapse="portrait">


    <ons-template id="page1.html">
        <ons-page>
        <ons-tabbar>
            <ons-tab page="books.html" icon="ion-ios-bookmarks" label="Books" active="true" onclick="app.splitView.setSecondaryPage('secondary.html')"></ons-tab>
            <ons-tab page="topics.html" icon="ion-android-globe" label="Topics" onclick="app.splitView.setSecondaryPage('secondary.html')"></ons-tab>
            <ons-tab page="espanol.html" icon="ion-ios-color-filter" label="Español" onclick="app.splitView.setSecondaryPage('triple.html')"></ons-tab>
        </ons-tabbar>
        </ons-page>
    </ons-template>

    <ons-template id="secondary.html">
        <ons-page>
            <ons-tabbar>
      <ons-tabbar-item page="split/bible.html" label="Bible" icon="fa fa-book" active="true"></ons-tabbar-item>
      <ons-tabbar-item page="split/browser.html" label="Browser" icon="fa fa-globe"></ons-tabbar-item>
        </ons-page>
    </ons-template>

<ons-template id="triple.html">
    <ons-page>
        <ons-tabbar>
  <ons-tabbar-item page="biblia/gene.html" label="Bible" icon="fa fa-book" active="true"></ons-tabbar-item>
  <ons-tabbar-item page="split/espbrowser.html" label="Browser" icon="fa fa-globe"></ons-tabbar-item>
    </ons-page>
</ons-template>
    </ons-split-view>
于 2015-09-09T22:17:20.370 回答