У меня есть 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/
10 errr, если ваше обходное решение действительно является единственным способом сделать эту работу, определенно должен быть отчет об ошибке, зарегистрированный на странице проекта. – Claies