I am trying to write a small Cordova App. Fortunatly found OnSenUI and now working on it. But I am facing this erorr:
Uncaught (in promise) Error: "html" must be one wrapper element.
at Object.util.createElement (util.js:147)
at page-loader.js:23
I searched for many solutions, but nothing worked for me.
My whole code:
<!DOCTYPE html>
<html>
<head>
<title>New App</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/onsenui.css" />
<link rel="stylesheet" href="css/onsen-css-components.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/onsenui.js"></script>
<script src="js/myJs.js"></script>
</head>
<body>
<ons-splitter>
<ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
<ons-page>
<ons-list>
<ons-list-item onclick="fn.load('home.html')" tappable> Home </ons-list-item>
<ons-list-item id="ons-list-fetch" onclick="fn.load('fetchPage.html');" tappable> Fetch Data </ons-list-item>
</ons-list>
</ons-page>
</ons-splitter-side>
<ons-splitter-content id="content" page="home.html"></ons-splitter-content>
</ons-splitter>
<ons-template id="home.html">
<ons-page id="helloworld-page">
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center"> Main </div>
</ons-toolbar>
<p style="text-align: center; opacity: 0.6; padding-top: 20px;"> Swipe right to open the menu! </p>
<!-- Inputs-->
<h2 style="text-align: center; opacity: 0.6;">Just H2</h2>
<div style="text-align: center; margin-top: 30px;">
<p>
<ons-input id="username" modifier="underbar" placeholder="Username" float></ons-input>
</p>
<p>
<ons-input id="password" modifier="underbar" type="password" placeholder="Password" float></ons-input>
</p>
<p style="margin-top: 30px;">
<ons-button id="btnClickMe">Click Me!</ons-button>
</p>
<section style="padding: 8px">
<ons-button modifier="quiet">Forgot Password</ons-button>
</section>
</div>
<!-- eof Inputs-->
<p style="text-align: center; font-size: 14px; opicity: 0.6"> All rights reserved </p>
</ons-page>
</ons-template>
<!-- fetchPage-->
<ons-template id="fetchPage.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center"> Fetch </div>
</ons-toolbar>
</ons-page>
<div id="divFtechHere">Fetched Data will be shown here</div>
</ons-template>
</body>
</html>
OMG Its too simple.
I was declaring <div id="divFtechHere"> outside <ons-page>
Wrong Code:
<!-- FetchPage-->
<ons-template id="fetchPage.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center"> Fetch </div>
</ons-toolbar>
</ons-page>
<div id="divFtechHere">Fetched Data will be shown here</div>
</ons-template>
Correct Code:
<ons-template id="fetchPage.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center"> Fetch </div>
</ons-toolbar>
<div id="divFtechHere">Fetched Data will be shown here</div>
</ons-page>
</ons-template>
Related
I am using Segment control in my App but I am unable to switch between the segments.
I am referring this link https://onsen.io/pattern-schedule.html
I have tried and also searched a lot but cant find any solution.
My Output :
My Code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy"/>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/onsenui.css">
<link rel="stylesheet" href="css/onsen-css-components.css">
<link rel="stylesheet" href="css/sliding_menu.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script src="js/angular/angular.js"></script>
<script src="js/angular/angular.min.js"></script>
<script src="js/onsenui.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>js"></script>
</head>
<script>
ons.bootstrap();
</script>
<body>
<ons-navigator animation="slide" title="Navigator" var="menu">
<ons-page var ="variable">
<ons-toolbar>
<div class="left">
</div>
<div class="center">
Menu
</div>
<div class="right">
<ons-toolbar-button>
<ons-icon icon="ion-plus" fixed-width="false" style="vertical-
align: -4px;"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<div class="navigation-bar">
<div class="navigation-bar__center">
<div class="button-bar" style="width:100%;right:8px; margin:8px; padding: 0px 5px;">
<div class="button-bar__item" ngclick="menu.setMainPage('indian.html')">
<input type="radio" name="navi-segment-a" checked>
<div class="button-bar__button">Indian</div>
</div>
<div class="button-bar__item" ngclick="menu.setMainPage('english.html')">
<input type="radio" name="navi-segment-a">
<div class="button-bar__button">English</div>
</div>
<div class="button-bar__item" ngclick="menu.setMainPage('drinks.html')">
<input type="radio" name="navi-segment-a">
<div class="button-bar__button">Drinks</div>
</div>
</div>
</div>
</div>
</ons-page>
</ons-navigator>
<ons-template id="indian.html">
<ons-page>
<div>
Hello, this is the content of drinks.html
</div>
</ons-page>
</ons-template>
<ons-template id="english.html">
<ons-page>
<div>
Hello, this is the content of drinks.html
</div>
</ons-page>
</ons-template>
<ons-template id="drinks.html">
<ons-page>
<div>
Hello, this is the content of drinks.html
</div>
</ons-page>
</ons-template>
Thanks in Advance.
Edit :
My requirements is that I want to open the templates i.e indian.html ,english.html and drinks.html within the same page on segment control click respectively like the splitview does
I am using Onsen 1
I am not using Sliding menu.
Update:I am now getting this Error...
04-11 04:58:06.471 14813-14851/com.hogo.onsenui E/AndroidProtocolHandler:
Unable to open asset URL: file:///android_asset/www/english.html
04-11 04:58:06.501 14813-14813/com.hogo.onsenui I/chromium:
[INFO:CONSOLE(108)] "Error: Page is not found: english.html
at
file:///android_asset/www/js/onsenui.js:13828:17
at
file:///android_asset/www/js/angular/angular.min.js:120:182
at n.$eval
(file:///android_asset/www/js/angular/angular.min.js:134:493)
at n.$digest
(file:///android_asset/www/js/angular/angular.min.js:132:9)
at n.$apply
(file:///android_asset/www/js/angular/angular.min.js:135:269)
at l
(file:///android_asset/www/js/angular/angular.min.js:87:152)
at F
(file:///android_asset/www/js/angular/angular.min.js:91:187)
at
XMLHttpRequest.e
(file:///android_asset/www/js/angular/angular.min.js:92:271)", source:
file:///android_asset/www/js/angular/angular.min.js (108)
Updated Code :
<body>
<ons-tabbar var="navi" position="top">
<ons-tab page="indian.html" active="true"></ons-tab>
<ons-tab page="english.html"></ons-tab>
<ons-tab page="drinks.html"></ons-tab>
</ons-tabbar>
<ons-toolbar>
<div class="left">
</div>
<div class="center">
Menu
</div>
<div class="right">
<ons-toolbar-button>
<ons-icon icon="ion-plus" fixed-width="false" style="vertical-
align: -4px;"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<ons-page>
<div class="navigation-bar">
<div class="navigation-bar__center">
<div class="button-bar" style="width:100%;right:8px; margin:8px;
padding: 0px 5px;">
<div class="button-bar__item" ng-click="navi.setActiveTab(0)">
<input type="radio" name="navi-segment-a" checked>
<div class="button-bar__button">Indian</div>
</div>
<div class="button-bar__item" ng-click="navi.setActiveTab(1)">
<input type="radio" name="navi-segment-a">
<div class="button-bar__button">English</div>
</div>
<div class="button-bar__item" ng-click="navi.setActiveTab(2)">
<input type="radio" name="navi-segment-a">
<div class="button-bar__button">Drinks</div>
</div>
</div>
</div>
</div>
</ons-page>
<ons-template id="indian.html">
<ons-page>
<p style="text-align: center; color: #999; padding-top: 100px;">
english Contents
</p>
</ons-page>
</ons-template>
<ons-template id="english.html">
<ons-page>
<p style="text-align: center; color: #999; padding-top: 100px;">
english Contents
</p>
</ons-page>
</ons-template>
<ons-template id="drinks.html">
<ons-page>
<p style="text-align: center; color: #999; padding-top: 100px;">
drinks Contents
</p>
</ons-page>
</ons-template>
</body>
I have hide the tabbar in my css page
There are several issues which may be preventing the program from working:
You are including angular twice
<script src="js/angular/angular.js"></script>
<script src="js/angular/angular.min.js"></script>
It's probably not the cause of your problem, but it may cause other issues - only one of the two files is enough.
<script type="text/javascript" src="js/index.js"></script>js"></script>
This also shouldn't be a problem, but tags like this may cause issues - when you have extra closing tags it's fine, but if you had an extra open tag then the whole page could be blank.
The attributes should be ng-click, not ngclick.
If you want to use the ons-navigator then the methods you have available are pushPage, popPage, replacePage. The setMainPage method which you're using is a method of the ons-sliding-menu.
If you want to have data filtered then you should:
Add ng-controller="AppController" to the body or some other parent element.
Add ng-model="a" to the radio buttons (and i guess some values).
Add the items to the $scope in the controller.
Add ng-repeat="item in items | filter: { category: category }" or something similar
So something like:
<div class="navigation-bar">
<div class="navigation-bar__center">
<div class="button-bar" style="width:100%;right:8px; margin:8px; padding: 0px 5px;">
<div class="button-bar__item">
<input type="radio" name="navi-segment-a" ng-model="a" value="indian" checked>
<div class="button-bar__button">Indian</div>
</div>
<div class="button-bar__item">
<input type="radio" name="navi-segment-a" ng-model="a" value="english">
<div class="button-bar__button">English</div>
</div>
<div class="button-bar__item">
<input type="radio" name="navi-segment-a" ng-model="a" value="drinks">
<div class="button-bar__button">Drinks</div>
</div>
</div>
</div>
</div>
<ons-list ng-repeat="item in items | filter: { category: category }">
<ons-list-item>{{item.name}} ...</ons-list-item>
</ons-list>
And for javascript:
ons.bootstrap().controller('AppController', function ($scope) {
$scope.a = "indian";
$scope.items = [ // put your items here
name: 'item 1', category: 'indian',
name: 'item 2', category: 'indian',
name: 'item 3', category: 'english',
name: 'item 4', category: 'english',
name: 'item 5', category: 'drinks',
name: 'item 6', category: 'drinks'
]
});
Update: I thought you wanted filtering. I'll leave the previous answer if anyone else is interested in it. And now the answer to the updated question:
What you seem to want in that case is exactly the functionality of ons-tabbar - you have tabs and tab contents - exactly what you seem to want. So you just want to have different styles for the tabs.
However styling them in that way may not be trivial and moreover the styles may break if you try to update the version. So instead I'll provide 2 other solutions, which don't require advanced css tricks:
Use a tabbar, but just hide it and link the actions from your segment control:
<div class="button-bar">
<div class="button-bar__item" ng-click="navi.setActiveTab(0)">
<input type="radio" name="navi-segment-a" checked>
<div class="button-bar__button">Indian</div>
</div>
...
<div class="button-bar__item" ng-click="navi.setActiveTab(2)">
<input type="radio" name="navi-segment-a">
<div class="button-bar__button">Drinks</div>
</div>
</div>
<ons-tabbar var="navi" position="top">
<ons-tab page="indian.html" active="true"></ons-tab>
<ons-tab page="english.html"></ons-tab>
<ons-tab page="drinks.html"></ons-tab>
</ons-tabbar>
CSS: #navi .tab-bar { display: none; }
Just use the navigator if you want to change the pages.
<ons-navigator page="indian.html" id="navi"></ons-navigator>
Add ng-click="navi.replacePage('pagename.html')" to the .button-bar__items
Add some distance on the top side of the navigator #navi { top: 40px; }
i want to program a chat in WhatsApp style.
The latest news will be shown below, and for new messages to be automatically scrolled down.
Can anyone help me how I can realize the automatic scrolling with ons-list?
<ons-template id="chat.html">
<ons-page ng-controller="ChatController">
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">Chat</div>
</ons-toolbar>
<ons-list style="margin-top: 10px" scroll-glue>
<ons-list-item class="item" ng-repeat="msg in messages">
<header>
<span class="item-title">{{msg.user}}</span>
</header>
<p class="item-desc">{{msg.msg}}</p>
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
I haven't used WhatsApp, but this might help. In an ons-page, you can use .page__content's scrollTop property for auto scroll. Like below. It uses jQuery for animation.
ons.bootstrap()
.controller('ChatController', function($scope, $timeout){
$scope.messages = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];
$timeout(function(){
$('.page__content').animate({scrollTop: $('.ons-list-inner').height()}, 2000)
.animate({scrollTop: 0}, 2000);
});
});
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.8/build/css/onsen-css-components.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.8/build/css/onsenui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.8/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.8/build/js/onsenui.min.js"></script>
<ons-navigator page="chat.html"></ons-navigator>
<ons-template id="chat.html">
<ons-page ng-controller="ChatController">
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">Chat</div>
</ons-toolbar>
<ons-list style="margin-top: 10px" scroll-glue>
<ons-list-item class="item" ng-repeat="msg in messages">
<header>
<span class="item-title">{{msg.user}}</span>
</header>
<p class="item-desc">{{msg.msg}}</p>
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
I have 4 files
index.html
page1.html
page2.html
page3.html
Here's my code...
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>
Why do i get this error?
Error: Page is not found: favo.html
Then i swapped into this...
<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>
Now im getting this error...
Page is not found: home.html
The 2nd position seems cursed.
...............................................
...............................................
...............................................
Here's the other files.
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 find a solution. But i found a workaround.
As i said, 2nd & 4th template are cursed. So, i created dummy_1 and dummy_2 to take the curse.
^_^ . Thats a smiley!
Change page3.html like below.
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>
Here's the tabs in action, show as gif video.
http://postimg.org/image/vin7bak3x/
I think the problem is that you're putting the <ons-template> tags inside the <ons-page> tag.
Instead try to put the templates at the body:
<body>
<ons-tabbar>
...
</ons-tabbar>
<ons-template id="favo.html">
...
</ons-template>
<ons-template id="home.html">
...
</ons-template>
...
</body>
Here is my exact syntax for a split view I have as far as setting my pages. Hopefully the syntax helps for individual pages. This works well for me
<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>
I can't get the navigation to work with the tab bar. I have a list page, search page and details page. For some reason I can't get the list page to persist when navigating either. The details page is never shown even thought I am using app.navi.pushPage('detail.html'). Before adding the tab-bar everything worked fine. Any ideas on what I am doing wrong?
As well, I need to access the detail page from both the list and search pages.
<ons-navigator page="list.html" var="app.navi"></ons-navigator>
<ons-tabbar>
<ons-tab page="favourites.html" label="Favourites" icon="fa-heart"></ons-tab>
<ons-tab page="list.html" label="Near Me" icon="fa-map-marker" active="true"></ons-tab>
<ons-tab page="search.html" label="Search" icon="fa-search"></ons-tab>
</ons-tabbar>
<ons-template id="list.html">
<ons-page id="list-page">
<ons-toolbar>
<div class="center">Near Me</div>
</ons-toolbar>
<ons-list id="lst-estblshmnt"></ons-list>
</ons-page>
</ons-template>
<ons-template id="search.html">
<ons-page id="search-page">
<ons-toolbar>
<div class="center">Search</div>
</ons-toolbar>
<ons-row>
<ons-col>
<input id="srch" type="search" class="search-input">
</ons-col>
<ons-col width="75px" style="display: none">
<ons-button id="btn-cancel-search" modifier="quiet">Cancel</ons-button>
</ons-col>
</ons-row>
<ons-list id="lst-srch"></ons-list>
</ons-page>
</ons-template>
<ons-template id="detail.html">
<ons-page id="detail-page">
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="right">
<ons-toolbar-button id="btn-fllw"><ons-icon icon="fa-heart-o"></ons-icon></ons-toolbar-button>
</div>
</ons-toolbar>
<ons-row>
<ons-col id="establishment-details">
<header>
<center class="item-title">Title</center>
</header>
<div class="item-details">
<ons-row>
<ons-col>
<p class="item-address"></p>
<p class="item-city"></p>
<p class="item-postal_code"></p>
</ons-col>
</ons-row>
</div>
</ons-col>
</ons-row>
</ons-list>
</ons-page>
</ons-template>
You cannot combine <ons-navigator> with <ons-tabbar>. If you use the tabbar element, you can switch pages using setActiveTab(index, [options]). I created a working sample using the template you provided and added a <ons-button> in the list.html template that changes the active page. For more info about the tabbar element, take a look here. Let me know if you need more help :)
<body>
<ons-tabbar var="tabbar">
<ons-tabbar-item
icon="home"
label="Home"
page="list.html"
active="true"></ons-tabbar-item>
<ons-tabbar-item
icon="comment"
label="Comments"
page="search.html"></ons-tabbar-item>
<ons-tabbar-item
icon="gear"
label="Settings"
page="detail.html"></ons-tabbar-item>
</ons-tabbar>
<ons-template id="list.html">
<ons-page id="list-page">
<ons-toolbar>
<div class="center">Near Me</div>
</ons-toolbar>
<ons-list id="lst-estblshmnt"></ons-list>
<ons-button id="btn-switch-search" ng-click="tabbar.setActiveTab(2)">Cancel</ons-button>
</ons-page>
</ons-template>
<ons-template id="search.html">
<ons-page id="search-page">
<ons-toolbar>
<div class="center">Search</div>
</ons-toolbar>
<ons-row>
<ons-col>
<input id="srch" type="search" class="search-input">
</ons-col>
<ons-col width="75px" style="display: none">
<ons-button id="btn-cancel-search" modifier="quiet">Cancel</ons-button>
</ons-col>
</ons-row>
<ons-list id="lst-srch"></ons-list>
</ons-page>
</ons-template>
<ons-template id="detail.html">
<ons-page id="detail-page">
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="right">
<ons-toolbar-button id="btn-fllw"><ons-icon icon="fa-heart-o"></ons-icon></ons-toolbar-button>
</div>
</ons-toolbar>
<ons-row>
<ons-col id="establishment-details">
<header>
<center class="item-title">Title</center>
</header>
<div class="item-details">
<ons-row>
<ons-col>
<p class="item-address"></p>
<p class="item-city"></p>
<p class="item-postal_code"></p>
</ons-col>
</ons-row>
</div>
</ons-col>
</ons-row>
</ons-list>
</ons-page>
</ons-template>
</body>
I am having a problem using my angular js controller on more than one ons-template using split-view navigation.
On the main page it works well, but when i load the second ons-template (that uses the same controller) on the main page it does not work at all.
Please help.
`
<ons-split-view
var="app.splitView"
secondary-page="menu.html"
main-page="search.html"
main-page-width="70%"
collapse="width 500px">
</ons-split-view>
<ons-template id="menu.html">
<ons-page style="background-color: white; border-right: 1px solid #ddd;">
<ons-toolbar>
<div class="center">Menu</div>
</ons-toolbar>
<ons-list>
<ons-list-item
modifier="tappable"
ng-click="app.splitView.toggle(); app.splitView.setMainPage('search.html');">
<i class="ion-search" style="color: #666"></i>
Search
</ons-list-item>
<ons-list-item
modifier="tappable"
onclick="app.splitView.toggle(); app.splitView.setMainPage('mostWanted.html');">
<i class="ion-person-stalker" style="color: #666"></i>
Most Wanted
</ons-list-item>
<ons-list-item
modifier="tappable"
ng-click="app.splitView.toggle(); app.splitView.setMainPage('stolenVehicles.html');">
<i class="ion-model-s" style="color: #666"></i>
Stolen Vehicles
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<ons-template id="search.html">
<ons-navigator var="searchNavigator">
<ons-page ng-controller="searchCtrl">
<ons-toolbar>
<div class="center">
<i class="ion-search" style="color: #666"></i>
Search
</div>
</ons-toolbar>
<div style="text-align: center; padding: 60px 10px 10px 10px;">
<section style="padding: 8px">
<b>Enter ID Number</b>
</section>
<section style="padding: 0 8px 8px">
<input type="search" class="search-input" placeholder="Enter ID Number..." style="color:black" ng-model="idNumber"></input>
</section>
<section style="padding: 0 8px 8px">
<ons-button modifier="large" ng-click="getRecords();">Submit</ons-button>
</section>
</div>
</ons-page>
</ons-navigator>
</ons-template>
<ons-template id="record.html">
<ons-navigator var="recordNavigator">
<ons-page ng-controller="searchCtrl">
<ons-toolbar>
<div class="center">
<i class="ion-clipboard" style="color: #666"></i>
Record
</div>
</ons-toolbar>
<div style="text-align: center; padding: 60px 10px 10px 10px;">
<h3>{{record.id}}</h3>
</div>
</ons-page>
</ons-navigator>
</ons-template>
`
JS:
app.controller('searchCtrl', function($scope,data){
$scope.record = null;
$scope.getRecords = function(){
for(var x=0; x<data.person.length; x++){
if($scope.idNumber == data.person[x].id){
$scope.record = data.person[x];
}
}
if($scope.record == null){
alert("No Criminal Record Found");
} else{
searchNavigator.pushPage('record.html');
//console.log($scope.record.id);
}
};
});
If you want the two pages to share the same controller, define the controller on the parent of the "ons-split-view" instead of each page. You can wrap the "ons-split-view" in a div.
For example;
<div ng-controller="searchCtrl">
<ons-split-view
var="app.splitView"
secondary-page="menu.html"
main-page="search.html"
main-page-width="70%"
collapse="width 500px">
</ons-split-view>
</div>