2015-09-04 3 views
0

У меня есть 4 файла
index.html
page1.html
page2.html
page3.html
Ошибка: Страница не найдена: favo.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> 



Didnt найти решение. Но я нашел обходное решение.
Как я уже сказал, 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> 



Вот вкладки в действии, показать как рисунок видео.
http://postimg.org/image/vin7bak3x/

+0

10 errr, если ваше обходное решение действительно является единственным способом сделать эту работу, определенно должен быть отчет об ошибке, зарегистрированный на странице проекта. – Claies

ответ

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> 
+0

Я сделал то, что вы сказали, и заменил на . Все еще не работает. @ andreas-argelius – Armadeus

+0

http://postimg.org/image/kv2vqvgp9/ – Armadeus

+0

Я имею в виду, что вы должны поместить шаблоны как прямые потомки в тег body в вашем index.html. –

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> 
Смежные вопросы