Onsen UI: Automatic scroll with ons-list - onsen-ui

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>

Related

Uncaught (in promise) Error: "html" must be one wrapper element onsenui

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>

Uncaught TypeError: Cannot read property 'attr' of null using popover

I'm using onsen-ui 1.3.13 and I get this error that I don't understand:
Uncaught TypeError: Cannot read property 'attr' of null using popover # loader.js:1450
I basically have 1 button, when I click it, I have 1 popover showing up with 2 other button. button 2 does a simple pop on an array. It worsk but give me this error right after.
Here is my code:
index.html
<!DOCTYPE HTML>
<html>
<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/controler.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="js/angular-moment.js"></script>
<script src="js/readable-range.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/sliding_menu.css">
</head>
<body>
<ons-sliding-menu main-page="initial.html" menu-page="menu.html" max-slide-distance="260px" type="overlay" var="menu" side="left" close-on-tap>
</ons-sliding-menu>
<ons-template id="menu.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" ng-controller="PopoverController">
<ons-list-item class="menu-item" ng-click="menu.setMainPage('initial.html', {closeMenu: true})">
<ons-icon icon="fa-gbp"></ons-icon>
Initial page
</ons-list-item>
<ons-list-item class="menu-item" ng-click="reset();menu.closeMenu()">
<ons-icon icon="fa-gbp"></ons-icon>
reset
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<ons-template id="popover.html">
<ons-popover direction="down" cancelable>
<ons-list>
<ons-list-item modifier="tappable" ng-click="alert(true, 'Sorry not available in this version')">
<ons-icon icon="fa-cloud"></ons-icon>
Save property
</ons-list-item>
<ons-list-item modifier="tappable" ng-click="reset(); destroy($event)" >
<ons-icon icon="fa-home"></ons-icon>
<label>Reset</label>
</ons-list-item>
</ons-list>
</ons-popover>
</ons-template>
</body>
</html>
controler.js:
var app = ons.bootstrap('propertyDeal', ['onsen','angularMoment']);
app.factory('Property', function () {
/**
* Constructor, with class name
*/
function Property(newProperty) {
this.id = newProperty.id;
this.purchasePrice = newProperty.pprice;
this.legaFee = newProperty.legal;
}
return {
createNew: function(newProperty) {
return new Property(newProperty);
}
};
});
app.factory('portfolio', function(Property){
var portfolio = {};
portfolio.list = [];
portfolio.add = function(newProperty){
var prop = Property.createNew(newProperty);
portfolio.list.push(prop);
};
portfolio.remove = function(){
var removed = portfolio.list.pop();
};
return portfolio;
});
app.controller('PopoverController', function($scope, portfolio) {
$scope.popurl = function(url, e) {
$scope.param = url;
ons.createPopover( $scope.param,{parentScope: $scope}).then(function(popover) {
$scope.popover = popover;
$scope.show(e);
});
$scope.show = function(e) {
$scope.popover.show(e);
};
$scope.destroy = function(e) {
$scope.popover.destroy(e);
};
};
$scope.alert = function(material, message) {
ons.notification.alert({
message: message,
modifier: material ? 'material' : undefined
});
};
$scope.reset = function() {
if (portfolio.list.length >= 1){
portfolio.remove();
}
};
});
app.controller('ListCtrl', function(portfolio) {
this.portfolio = portfolio.list;
});
app.controller('PostCtrl', function(portfolio){
this.addProperty = function(newProperty){
if (angular.isDefined(newProperty)) {
newProperty.id = portfolio.list.length;
portfolio.add(newProperty);
}
};
});
initial.html
<ons-navigator>
<ons-page>
<div class="container">
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggleMenu()">
<ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
<ons-icon class="icon" icon="ion-android-share"></ons-icon> this is a test
</div>
<div class="right" ng-controller="PopoverController">
<ons-toolbar-button id="android-share" ng-click="popurl('popover_share.html', $event)">
<ons-icon icon="ion-android-share" fixed-width="false"></ons-icon>
</ons-toolbar-button>
<ons-toolbar-button id="android-more" ng-click="popurl('popover.html', $event)">
<ons-icon icon="ion-android-more-vertical" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
</div>
<div style="text-align: center">
<h2>Page 1</h2>
<ul class="list">
<input type="hidden" ng-model="newProperty.id" placeholder="id">
<li class="list__item">
<span class="currency">£<input type="number" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" ng-model="newProperty.pprice" placeholder="Purchase price" required></span>
</li>
<li class="list__item">
<span class="currency">£<input type="number" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" ng-model="newProperty.legal" placeholder="Legal fees"></span>
</li>
</ul>
</div>
<br />
<div ng-controller="PostCtrl as post">
<button class="button" ng-click="post.addProperty(newProperty);menu.setMainPage('initial2.html')">Next <ons-icon icon="ion-arrow-right-b"></ons-icon></button>
<p>{{newProperty}}</p>
</div>
<div ng-controller="ListCtrl as list">
<p ng-repeat="prop in list.portfolio track by $index">
New Property: {{prop.id}} - {{prop.purchasePrice}}: {{prop.legaFee}} </p>
</div>
</ons-page>
</ons-navigator>
After adding the reset() to the sliding menu as well, I can also say that it works perfectly fine with the sliding menu so I think it's definitely a problem with popover but I don't know what.
Thank you for your help
In that code you are creating and destroying the popover over and over again. The problem is not in reset() function but in destroy(). You are trying to destroy the popover while showing it and there is a timing problem. Internally it tries to check its position when it's been already destroyed. Even there is no disappearing animation right now since you just destroy it instead of hiding it.
The solution is to create the popovers once and after that show and hide them whenever you need. Hope it helps!
Update:
The way you are using it right now actually has a memory leak. You create the popover every time you click on the toolbar button and destroy it in reset() function. The problem is that if you show the popover and then click outsite it, it will be hidden and not destroyed, so next time you open the popover it creates another one. You can check your DOM and see that every time there is 1 more popover added.
The correct way to use the popover is creating it only once and then showing and hiding it when you need. You need to destroy it only when you don't need it anymore. There is a way to do it automatically:
$scope.$on('$destroy', $scope.myPopover.destroy);
That will destroy the popover in the current scope when you change to another scope.

Error: Page is not found: favo.html

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>

Onsen UI navigation not working after adding tabbar

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>

listener for ons-sliding-menu "preopen" event

I am trying to define event listener for ons-sliding-menu "preopen" event. I want setTitle() function of UICtrl controller to be invoked on preopen. Here's my code
app.js
app.controller('UICtrl', function($scope, UIService){
$scope.setMainTitle = function(title) {
UIService.setTitle(title);
}
}
I have tried the following HTML. But the event is not even fired ( i tried to write to console, it is not fired at all)
index.html
<div ng-controller="UICtrl" >
<ons-sliding-menu var="app.slidingMenu" ng-preopen="setMainTitle('test')"
menu-page="menu.html" main-page="main.html" swipable
side="left" type="reveal" max-slide-distance="250px">
</ons-sliding-menu>
</div>
another thing I tried was:
index.html
ons.ready(function() {
app.slidingMenu.on('preopen', function() {
console.log('preopen');
setMainTitle('Test');
} )
});
in this case the event is fired but setMainTitle function is naturally undefined in this scope.
Could someone have a suggestion how to achieve this?
I'm guessing the title is on your main.html??
I tried the same thing but without using angularJS
Look at this sample:
codepen example
JS:
ons.bootstrap();
ons.ready(function() {
menu.on("preopen", function() {
document.getElementById("title").innerHTML = "my title";
});
});
HTML:
<ons-sliding-menu
above-page="page1.html"
behind-page="menu.html"
side="left"
max-slide-distance="250px"
var="menu">
</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" id="title">Page 1</div>
</ons-toolbar>
<p style="text-align: center; color: #999; padding-top: 100px;">Page1 Contents</p>
</ons-page>
</ons-template>
<ons-template id="page2.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="menu.toggleMenu()"><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon></ons-toolbar-button>
</div>
<div class="center">Page 2</div>
</ons-toolbar>
<p style="text-align: center; color: #999; padding-top: 100px;">Page2 Contents</p>
</ons-page>
</ons-template>
<ons-template id="menu.html">
<ons-list>
<ons-list-item modifier="chevron" onclick="menu.setAbovePage('page1.html', {closeMenu: true})">
page1.html
</ons-list-item>
<ons-list-item modifier="chevron" onclick="menu.setAbovePage('page2.html', {closeMenu: true})">
page2.html
</ons-list-item>
</ons-list>
</ons-template>

Resources