Question

我有4个文件
index.html
page1.html
page2.html
page3.html

这是我的代码......

<script type="text/javascript">
  var initAutocomplete = function($el, dataUrl) {
      var autocompleteOptions = { selectFirst: true, delay:0};
      $el.autocomplete(dataUrl, autocompleteOptions);
    };

    $(document).ready(function(){
      var $province, $city, $religion, $ethnicity,


      $province = $('#province');
      initAutocomplete($province, "search/province.php");


      $city = $('#city');
      initAutocomplete($city, "search/city.php");


      $religion = $('#religion');
      initAutocomplete($religion, "search/religion.php");

      $ethnicity = $('#ethnicity');
      initAutocomplete($ethnicity, "search/ethnicity.php");


    });
</script>

为什么我会收到此错误？

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>

没有找到解决方案。但我找到了解决方法。
正如我所说，第二＆amp;第四个模板被诅咒。所以，我创建了dummy_1和dummy_2来诅咒。
^ _ ^。多笑啊！

如下所示更改page3.html。

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>

这是正在运行的标签，显示为gif视频。
http://postimg.org/image/vin7bak3x/

Answer 1

我认为问题在于您将<ons-template>标记放在<ons-page>标记内。

而是尝试将模板放在正文中：

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

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

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

  ...
</body>

错误：找不到页面：favo.html

1 个答案: