onsenui modal data binding

onsenui modal data binding - javascript

Not sure if this is an Angular question, or an onsenui question, but here goes...
I would like to data bind an element in an onsenui modal as follows:
<ons-modal var="modalUpload">
<ons-icon icon="cog" spin="true"></ons-icon>
<div>
<div>{{status}}</div>
</div>
</ons-modal>
<ons-page ng-controller="someController">
<ons-toolbar>
<div class="left">
<ons-back-button>Back</ons-back-button>
</div>
<div class="center">Some Section</div>
</ons-toolbar>
<ons-row>
<ons-col align="center">
<div class="content-padded">
<div>{{status}}</div>
</div>
<div class="content-padded">
<ons-button modifier="large" ng-click="upload()">Submit</ons-button>
</div>
</ons-col>
</ons-row>
</ons-page>
... the controller
function someController($scope, $http) {
$scope.status = 'init';
$scope.upload = function() {
$scope.status('test test test');
modalUpload.show();
}
};
After calling $scope.upload(), $scope.status is updated. There are two references to {{status}} in the view, one in the modal, and one in the page... When setting $scope.status, the reference in ons-page works as expected, but the reference in ons-modal does not.
Anyone have any thoughts?
Cheers :)

I think the problem might be because of the modal is outside of the controller. How about trying putting it inside the controller as below:
<ons-page ng-controller="someController">
<ons-modal var="modalUpload">
<ons-icon icon="cog" spin="true"></ons-icon>
<div>
<div>{{status}}</div>
</div>
</ons-modal>
<ons-toolbar>
<div class="left">
<ons-back-button>Back</ons-back-button>
</div>
<div class="center">Some Section</div>
</ons-toolbar>
<ons-row>
<ons-col align="center">
<div class="content-padded">
<div>{{status}}</div>
</div>
<div class="content-padded">
<ons-button modifier="large" ng-click="upload()">Submit</ons-button>
</div>
</ons-col>
</ons-row>
</ons-page>
Let me know what happens.

Related

Why isn't my second tabbar page showing in ONSEN UI

I'm relatively new to ONSEN UI, I am using a tabbar layout and also pushing to different pages when an "option" is pressed, this is my solution for it to do so:
<ons-navigator id="myNavigator" animation="fade" page="timer.html">
<ons-page>
<ons-tabbar swipeable animation='slide' position="bottom">
<ons-tab page="classic.html" label="CLASSIC" icon="fa-smile" active>
</ons-tab>
<ons-tab page="drinking.html" label="DRINK" icon="fa-beer" badge="NEW">
</ons-tab>
</ons-tabbar>
<ons-toolbar>
<ons-toolbar>
<div class="center">Truth or Dare - Unlimited</div>
<div class="right menu">
<ons-toolbar-button>
<ons-icon icon="fa-ellipsis-v"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
</ons-toolbar>
</ons-page>
</ons-navigator>
<template id="classic.html">
<ons-navigator id="myNavigator" animation="fade" page="classic.html">
<ons-page id="classic">
<div class="options">
<div class="option vibrate easy">
<ons-ripple color="#c9446c" background="#C3073F"></ons-ripple>
<img src="icons/easy.png" class="level-img" alt="Easy">
<h2>Easy</h2>
</div>
<div class="option vibrate normal">
<ons-ripple color="#c9446c" background="#C3073F"></ons-ripple>
<img src="icons/normal.png" class="level-img" alt="Normal">
<h2>Normal</h2>
</div>
<div class="option vibrate hard">
<ons-ripple color="#c9446c" background="#C3073F"></ons-ripple>
<img src="icons/hard.png" class="level-img" alt="Hard">
<h2>Hard</h2>
</div>
<div class="option locked vibrate nightmare">
<ons-ripple color="#c9446c" background="#C3073F"></ons-ripple>
<img src="icons/nightmare.png" class="level-img" alt="Nightmare">
<h2>Nightmare</h2>
</div>
<div class="option locked vibrate random">
<ons-ripple color="#c9446c" background="#C3073F"></ons-ripple>
<img src="icons/random.png" class="level-img" alt="Random">
<h2>Random</h2>
</div>
<div class="option locked vibrate couple">
<ons-ripple color="#c9446c" background="#C3073F"></ons-ripple>
<img src="icons/couple.png" class="level-img" alt="Couple">
<h2>Couple</h2>
<p>(Dirty)</p>
</div>
</div>
</ons-page>
</ons-navigator>
</template>
<template id="drinking.html">
<ons-navigator id="myNavigator" animation="fade" page="drinking.html">
<ons-page id="drinking">
<p>PAGE 2</p>
</ons-page>
</ons-navigator>
</template>
No custom js is used for the tabbar elements.
Why isn't the content on my second tabbar page showing? I've tried removing the ons-navigator from the drinking template but still no progress, now I'm stuck.
What am I doing wrong?

Onsen: How to use ons-splitter with ons-tabbar?

I'm using onsen ui to create a hybrid app.
I just need to know if it is possible to use ons-splitter with ons-tabbar at the same time as I cannot find any reference to that at all.
when I use ons-splitter with ons-tabbar, my ons-splitter stops working but when I remove the ons-tabbar from my page, everything starts working again.
This is my code:
<ons-splitter >
<ons-splitter-side id="menu" side="right" width="220px" collapse swipeable>
<ons-page>
<ons-list>
<ons-list-item onclick="fn.load('home.html')" tappable>
Home
</ons-list-item>
<ons-list-item onclick="fn.load('settings.html')" tappable>
settings
</ons-list-item>
<ons-list-item onclick="fn.load('about.html')" tappable>
About
</ons-list-item>
</ons-list>
</ons-page>
</ons-splitter-side>
<ons-splitter-content>
<ons-navigator id="navi" page="home.html"></ons-navigator>
</ons-splitter-content>
</ons-splitter>
<ons-tabbar id="menu2" position="bottom">
<ons-tab page="home.html" label="Search For Personal Trainers" icon="search-plus" onclick="fn.load('home.html')" tappable disabled></ons-tab>
</ons-tabbar>
any help would be appreciated.

In order to get the ons-splitter and ons-tabbar to work together is by using the ons-navigator as the primary nav.
Here's my version of the code based off of Fran Diox post here: https://community.onsen.io/topic/623/trouble-with-tab-splitter-and-navigation-working-together/2
<!-- First navigation component: Navigator. This will remain always on top of the app. -->
<ons-navigator id="myNavigator" page="splitter.html">
</ons-navigator>
<!-- Second navigation component: Splitter. This will disappear if the first component changes its content. -->
<ons-template id="splitter.html">
<ons-splitter>
<ons-splitter-side id="mySplitter" swipeable width="250px" collapse swipe-target-width="50px">
<ons-page>
<ons-list>
<ons-list-item onclick="fn.load('home.html')" tappable>
Home
</ons-list-item>
</ons-list>
</ons-page>
</ons-splitter-side>
<ons-splitter-content id="content" page="tabbar.html">
</ons-splitter-content>
</ons-splitter>
</ons-template>
<!-- Third navigation component: Tabbar. This will disappear if the first or second components change their content. -->
<ons-template id="tabbar.html">
<ons-page id="tabbarPage">
<ons-toolbar>
<div class="left">
<!-- Toolbar-button with different icons depending on the platform. -->
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="ion-navicon, material:md-menu" size="32px, material:24px"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Nav, Splitter & Tabs</div>
<div class="right">
</div>
</ons-toolbar>
<!-- Auto-positioned Tabbar: top on Android, bottom on iOS/other. -->
<ons-tabbar id="myTabbar" position="auto">
<ons-tab page="tab1.html" label="Tab 1" active>
</ons-tab>
<ons-tab page="tab2.html" label="Tab 2">
</ons-tab>
</ons-tabbar>
<ons-template id="tab1.html">
<ons-page>
<ons-toolbar>
<div class="center">Tab 1</div>
</ons-toolbar>
<p style="text-align: center;">
This is the first tab.
</p>
</ons-page>
</ons-template>
<ons-template id="tab2.html">
<ons-page>
<ons-toolbar>
<div class="center">Tab 2</div>
</ons-toolbar>
<p style="text-align: center;">
This is the second tab.
</p>
</ons-page>
</ons-template>
</ons-page>
</ons-template>

Onsen-UI slide navigation error

When I transtion to the person.html page using the 'slide' transition, I get the following error: "Fail to fetch PageView from ons-page element."
I don't get an error when I change the transition from 'slide' to 'fade'.
<ons-navigator title="Navigator" var="myNavigator">
<ons-sliding-menu main-page="index.html" menu-page="menu-timeline.html" max-slide-distance="260px" type="push" var="menu">
</ons-sliding-menu>
<ons-template id="index.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button>
<ons-icon icon="ion-home" fixed-width="false" style="font-size: 26px; vertical-align: -4px"></ons-icon>
People App
</ons-toolbar-button>
</div>
<div class="center">People</div>
<div class="right">
<ons-toolbar-button>
<ons-icon icon="ion-search" onclick="myNavigator.pushPage('search-global.html', { animation : 'fade' } )"></ons-icon>
</ons-toolbar-button>
<ons-toolbar-button ng-click="menu.toggleMenu()">
<ons-icon icon="ion-more"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<!-- changing 'slide' to 'fade' below removes the error -->
<ons-list class="timeline" modifier="inset">
<ons-list-item class="timeline-li" modifier="tappable" ng-repeat="i in [1,2,3]" ng-click="myNavigator.pushPage('person.html', { animation : 'slide' } )">
<ons-row>
<ons-col width="50px">
<img ng-src="https://placeholdit.imgix.net/~text?txtsize=8&txt=50%C3%9750&w=50&h=50" class="timeline-image">
</ons-col>
<ons-col>
<div class="timline-from">
<span class="timeline-name">My Awesome Friend</span>
</div>
</ons-col>
</ons-row>
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<ons-template id="menu-timeline.html">
<ons-page modifier="menu-page">
<ons-toolbar modifier="transparent">
<div class="right">
<ons-toolbar-button class="menu-closeMenu" ng-click="menu.closeMenu()">
</ons-icon>Close
</ons-toolbar-button>
</div>
</ons-toolbar>
<ons-list class="menu-list">
<ons-list-item class="menu-item" ng-click="menu.closeMenu()">
<ons-icon icon="fa-plus"></ons-icon>
New Person
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<ons-template id="person.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="myNavigator.popPage();">
<ons-icon icon="ion-arrow-left-a" fixed-width="false" style="font-size: 20px;vertical-align:-3px;margin-right:3px;"></ons-icon>
<ons-icon icon="ion-home" fixed-width="false" style="font-size: 26px; vertical-align: -4px"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Person Name. </div>
<div class="right">
<ons-toolbar-button ng-click="menu.toggleMenu()">
<ons-icon icon="ion-android-more-vertical"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<ons-list>
<ons-list-item>
Hello. I am Person Name.
</ons-list-item>
<ons-list-item>
If this page appeared using 'slide' then an error resulted.
</ons-list-item>
<ons-list-item>
If it appeared using 'fade' then it should still function fine.
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<ons-template id="search-global.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="myNavigator.popPage();">
<ons-icon icon="ion-arrow-left-a" fixed-width="false" style="font-size: 20px;vertical-align:-3px;margin-right:3px;"></ons-icon>
<ons-icon icon="ion-home" fixed-width="false" style="font-size: 26px; vertical-align: -4px"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Search People</div>
</ons-toolbar>
<ons-list>
<ons-list-item>
<input type="text" placeholder="Enter search text" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;">
</ons-list-item>
<ons-list-item style="padding-bottom:8px;padding-top:5px;">
<ons-button modifier="large" onclick="">
Search
</ons-button>
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
</ons-navigator>
I prefer to use the slide transition because I think it makes navigation look more linear. Does anyone know how I can fix this error?
Here is the CodePen: http://codepen.io/blarney2000/pen/qZoVzW

Basically it just isn't able to find the initial page. If you just wrap the sliding menu inside a page it will be fine. Demo
<ons-navigator title="Navigator" var="myNavigator">
<ons-page>
<ons-sliding-menu main-page="index.html" menu-page="menu-timeline.html" max-slide-distance="260px" type="push" var="menu">
</ons-sliding-menu>
</ons-page>
</ons-navigator>
Why it bugs out only for slide is sort of a mystery, but the development of Onsen 1 is already finished, so if it's a bug then it's not very likely to be fixed in version 1. So the solution is just put the page and everything will work. Also if you want you could put the navigator inside the sliding menu if that's what you want. Then you can have ons-sliding-menu > ons-navigator > ons-page.

onsen-ui ons-back-button not working

I am working with a mobile app in Phongap and Cordova.
I have my index.html page with ons-list and in each item I get redirected to another page.
I'm doing this as follows:
<list-item-ons modifier = "chevron" ng-click = "myNavigator.pushPage ('NewPage.html', {animation: 'slide'})">
In the new page I have an ons-toolbar with ons-back-button that dosn't work. I want to do a popPage() to return to Index.html.
Could someone give me some help with this?
This is my code:
Index.html:
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<title>My App</title>
<link rel="stylesheet" href="lib/onsen/css/onsenui.css">
<link rel="stylesheet" href="styles/app.css"/>
<link rel="stylesheet" href="styles/onsen-css-components.min.css">
<script type="text/javascript" src="cordova.js"></script>
<script src="lib/onsen/js/angular/angular.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-controller="AppController">
<ons-navigator title="Navigator" var="myNavigator">
<ons-sliding-menu main-page="page1.html"
menu-page="menu.html"
side="left"
max-slide-distance="250px"
var="menu"
type="overlay">
</ons-sliding-menu>
<ons-template id="page1.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggleMenu()"><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon></ons-toolbar-button>
</div>
<div class="center">MyAppName</div>
</ons-toolbar>
<div style="width:100%;height:70%">
<ons-list>
<ons-list-item modifier="chevron">
<div style="text-align:center">Item 1</div>
</ons-list-item>
<ons-list-item modifier="chevron">
<div style="text-align:center">Item 2</div>
</ons-list-item>
<ons-list-item modifier="chevron">
<div style="text-align:center">Item 3</div>
</ons-list-item>
<ons-list-item modifier="chevron">
<div style="text-align:center">Item 4</div>
</ons-list-item>
<ons-list-item modifier="chevron" ng-click="myNavigator.pushPage('NewPage.html', { animation : 'slide' })">
<div style=" text-align:center">Item 5</div>
</ons-list-item>
</ons-list>
</div>
</ons-page>
</ons-template>
<ons-template id="menu.html">
<ons-list>
<ons-list-item modifier="tappable" onclick="menu.setMainPage('page1.html', {closeMenu: true})">
<ons-icon icon="fa-home" size="20px" style="color: #661f7a"></ons-icon>
Home
</ons-list-item>
<ons-list-item modifier="tappable">
<ons-icon icon="fa-question" size="20px" style="color: #661f7a"></ons-icon>
Help
</ons-list-item>
<ons-list-item modifier="tappable">
<ons-icon icon="fa-info-circle" size="20px" style="color: #661f7a"></ons-icon>
About My App
</ons-list-item>
</ons-list>
</ons-template>
</ons-navigator>
</body>
</html>
NewPage.html (containing the back button that doesn't work):
<ons-page>
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">My New Page</div>
</ons-toolbar>
<div>
<div>
<input class="text-input" id="my-input" placeholder="Enter some Text...">
</div>
<div>
<ons-switch var="mySwitch1"></ons-switch>
</div>
<div>
<select id="select1"></select>
</div>
<div>
<ons-switch var="mySwitch2"></ons-switch>
</div>
<div>
<select id="select2"></select>
</div>
</div>
</ons-page>

<div class="left" onclick="fn.load('home.html')" tappable><ons-back-button>Back</ons-back-button></div>
And in your js file:
window.fn = {};
window.fn.open = function() {
var menu = document.getElementById('menu');
menu.open();
};
window.fn.load = function(page) {
var content = document.getElementById('content');
var menu = document.getElementById('menu');
content.load(page).then(menu.close.bind(menu));
};

The declaration of the ons-navigator is wrong, you should put the navigator in your main page. The structure should be something like:
<ons-template id="mainPage.html">
<ons-navigator var="myNav">
<ons-page>
...content...
</ons-page>
</ons-navigator>
</ons-template>
You can find a working CodePen example HERE, hope it helps!

Onsen UI sliding menu

I have a menue like this:
<ons-navigator animation="slide" var="myNavigator">
<ons-sliding-menu menu-page="menu.html" main-page="link/to/some/page.html" side="left"
var="menu" type="reveal" max-slide-distance="260px" swipable="true">
</ons-sliding-menu>
<ons-template id="menu.html">
<ons-page modifier="menu-page">
<ons-toolbar modifier="transparent"></ons-toolbar>
<ons-list class="menu-list">
<ons-list-item class="menu-item" ng-click="menu.setMainPage('link/to/some/page.html', {closeMenu: true})">
Home
</ons-list-item>
<ons-list-item class="menu-item" ng-click="menu.setMainPage('link/to/some/other/page.html', {closeMenu: true})">
Home
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
</ons-navigator>
after navigating to "link/to/some/other/page.html", I have a $scope.myNavigator.pushPage('anotherpage', {});
operation. This also works.
But after I performed the pushpage operation, I am not able to use the menu any more. I have to do a popPage before.
A page looks like this:
<div ng-controller="someNiceController">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggle()">
<ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">{{title}}</div>
</ons-toolbar>
My nice content
</ons-page>
</div>
I think there is a problem with the structure of my page...
Any suggestions?

You should put the sliding menu outside the navigator.
The content inside the navigator will be replaced by another page when you push, so the sliding menu in your example will disappear when you use pushPage().
The following code shows how you can use a sliding menu together with a navigator:
<ons-sliding-menu
main-page="main.html"
menu-page="menu.html"
side="left"
max-slide-distance="250px"
var="menu">
</ons-sliding-menu>
<ons-template id="main.html">
<ons-navigator var="myNavigator">
<ons-toolbar>
<div class="center">Page 1</div>
</ons-toolbar>
<br>
<div style="text-align: center">
<ons-button onclick="myNavigator.pushPage('page2.html')">Push</ons-button>
</div>
</ons-navigator>
</ons-template>
<ons-template id="page2.html">
<ons-page>
<ons-toolbar>
<div class="center">Page 2</div>
</ons-toolbar>
<br>
<div style="text-align: center">
<ons-button onclick="myNavigator.popPage()">Pop</ons-button>
</div>
</ons-page>
</ons-template>
<ons-template id="menu.html">
<ons-list>
<ons-list-item modifier="tappable">
Some option
</ons-list-item>
<ons-list-item modifier="tappable">
Another option
</ons-list-item>
</ons-list>
</ons-template>
Here you can see it in action:
http://codepen.io/argelius/pen/ogXGeV

Here's a working sliding menu in Onsen UI. Two changes you should make is to put the sliding-menu element is outside of the navigator, and to reference it with a variable, var="menu". Using a variable simplifies your script. Click below for a simple example.
ons.bootstrap();
<head>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/onsenui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/js/onsenui.min.js"></script>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/onsen-css-components.css" rel="stylesheet" />
</head>
<body>
<ons-sliding-menu main-page="main.html" menu-page="menu.html" side="left" max-slide-distance="250px" var="menu">
</ons-sliding-menu>
<ons-template id="main.html">
<ons-navigator var="myNavigator">
<ons-toolbar>
<div class="center">Page 1</div>
</ons-toolbar>
<br>
<div style="text-align: center">
<ons-button onclick="myNavigator.pushPage('page2.html')">Next Page</ons-button>
<ons-button onclick="menu.toggleMenu()">Toggle Menu</ons-button>
</div>
</ons-navigator>
</ons-template>
<ons-template id="page2.html">
<ons-page>
<ons-toolbar>
<div class="center">Page 2</div>
</ons-toolbar>
<br>
<div style="text-align: center">
<ons-button onclick="myNavigator.popPage()">Back</ons-button>
</div>
</ons-page>
</ons-template>
<ons-template id="menu.html">
<ons-list>
<ons-list-item modifier="tappable">
First option
</ons-list-item>
<ons-list-item modifier="tappable">
Second option
</ons-list-item>
</ons-list>
</ons-template>
</body>

Develop Reference

JavaScript is the programming language of the Web.

onsenui modal data binding - javascript

Related

Why isn't my second tabbar page showing in ONSEN UI

Onsen: How to use ons-splitter with ons-tabbar?

Onsen-UI slide navigation error

onsen-ui ons-back-button not working

Onsen UI sliding menu

Categories

Resources