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.
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; }
So before someone jumps on me and shout that there is already a solution for this, I'm sorry but it doesn't work for me.
I had a look and tried both options proposed in the questions bellow, with no success.
How to hide popover in onsen ui
I don't really understand why as my code is almost identical to the examples. I use a sliding menu on the page but that's pretty much it.
Here is my index.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>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/sliding_menu.css">
<script>
var app = ons.bootstrap('propertyDeal', ['onsen']);
app.controller('AppController', function($scope, myService) {
ons.createPopover('popover.html',{parentScope: $scope}).then(function(popover) {
$scope.popover = popover;
myService.setPopover($scope.popover);
});
})
app.controller('HydePController', function($scope, myService) {
$scope.destroyPopover = function() {
$scope.popover = myService.getPopover();
$scope.popover.hide();
}
});
app.service("myService", function(){
var sharedPopover
var setPopover = function(pop){
sharedPopover = pop;
};
var getPopover = function(){
return sharedPopover;
};
return {
setPopover: setPopover,
getPopover: getPopover,
};
});
</script>
</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="popover.html">
<ons-popover direction="down" cancelable>
<ons-list ng-controller="HydePController">
<ons-list-item modifier="tappable" ng-click="menu.setMainPage('save.html', {closeMenu: true}); popover.hide()">
<ons-icon icon="fa-cloud"></ons-icon>
Save property
</ons-list-item>
<ons-list-item modifier="tappable" ng-click="hydepopover()">
<ons-icon icon="fa-home"></ons-icon>
View portfolio
</ons-list-item>
</ons-list>
</ons-popover>
</ons-template>
</body>
And initial.html
<ons-navigator>
<ons-page>
<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-social-usd"></ons-icon> Initial investment
</div>
<div class="right">
<ons-toolbar-button ng-click="menu.toggleMenu()">
<ons-icon icon="ion-android-share" fixed-width="false"></ons-icon>
</ons-toolbar-button>
<ons-toolbar-button ng-controller="AppController" id="android-more" ng-click="popover.show($event);">
<ons-icon icon="ion-android-more" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<div style="text-align: center">
<h2>Initial investment</h2>
<ul class="list">
<li class="list__item">
<input type="text" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" placeholder="Purchase price">
</li>
<li class="list__item">
<input type="text" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" placeholder="Market value">
</li>
<li class="list__item">
<input type="text" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" placeholder="Stamp duty">
</li>
<li class="list__item">
<input type="text" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" placeholder="Sourcing fee">
</li>
<li class="list__item">
<input type="text" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" placeholder="Legal fee">
</li>
<li class="list__item">
<input type="text" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" placeholder="Other">
</li>
</ul>
</div>
</ul>
</div>
</ons-page>
</ons-navigator>
So as said above, I tried both solutions and no luck. I don't understand why. I also have the sliding menu that doesn't close when clicking outside of the menu. Could this be related ?
Thank you for your help !
Arnaud
The code you provided is fine except one small mistake. You should not add the controller on ons-toolbar-button because it will break the button.
Just add the controller on the parent element (in initial.html), from this:
<div class="right">
<ons-toolbar-button ng-click="menu.toggleMenu()">
<ons-icon icon="ion-android-share" fixed-width="false"></ons-icon>
</ons-toolbar-button>
<ons-toolbar-button ng-controller="AppController" id="android-more" ng-click="popover.show($event);">
<ons-icon icon="ion-android-more" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
to this:
<div class="right" ng-controller="AppController" >
<ons-toolbar-button ng-click="menu.toggleMenu()">
<ons-icon icon="ion-android-share" fixed-width="false"></ons-icon>
</ons-toolbar-button>
<ons-toolbar-button id="android-more" ng-click="popover.show($event);">
<ons-icon icon="ion-android-more" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
You can find a working CodePen example HERE.
Regarding the sliding-menu, it seems working fine.
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 am building an Mobile App using ONSEN UI. I am using angularjs as supporting JavaScript framework.
Here is how i have 2 views in a single page template.
<ons-template id="categories.html">
<ons-page ng-controller="directoryControl">
<ons-toolbar>
<div class="center">Directory Category List</div>
</ons-toolbar>
<ons-list>
<ons-list-item modifier="chevron" class="list-item-container" ng-repeat="PostCategory in PostCategories">
<ons-row ng-click="setCurrentCategory(PostCategory.slug); menu.setMainPage('directory-page.html')">
<ons-col>
<div class="name">
{{PostCategory.title}}
</div>
</ons-col>
<ons-col width="40px"></ons-col>
</ons-row>
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<!-- when i click on any row (List Item) -->
<ons-template id="directory-page.html">
<ons-page ng-controller="directoryCategoryListing">
<ons-toolbar>
<div class="center">Directory List</div>
</ons-toolbar>
<p style="text-align: center" ng-show="spinner">
<ons-icon icon="spinner" class="spinner center" size="40px" spin="true" fixed-width="true" ></ons-icon>
</p>
<ons-list>
<ons-list-item modifier="chevron" class="list-item-container">
<ons-row>
<ons-col width="95px">
<img src="images/location1.png" class="thumbnail">
</ons-col>
<ons-col>
<div class="name">
Some Title
</div>
<div class="desc">
Some Description
</div>
</ons-col>
<ons-col width="40px"></ons-col>
</ons-row>
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
So here is my controllers looks like:
var module = angular.module('app', ['onsen']);
module.controller('directoryControl', function($scope, $http) {
ons.ready(function() {
$scope.spinner = true;
$scope.CurrentCategory = null;
//some other code in between
$scope.setCurrentCategory = function(categoryName){
$scope.CurrentCategory = categoryName;
console.log($scope.CurrentCategory);
}
});
});
/* Second CONTROLLER WHERE I WANT $scope.CurrentCategory value */
module.controller('directoryCategoryListing', function($scope, $http) {
ons.ready(function() {
console.log($scope.CurrentCategory);
});
});
I can get the value of clicked row(list item) in the first controller. But couldn't take it to second one. Is there any way i can do that?
The template structure is one page style. http://codepen.io/anon/pen/wavYzY for reference
Thank you! (In advance)
Use $rootScope to communicate between controller.see codepen
use this code:
$scope.setCurrentCategory = function(categoryName){
$scope.CurrentCategory = categoryName;
console.log($scope.CurrentCategory);
$rootScope.CurrentCategory=$scope.CurrentCategory;
}
and replace 2nd controller code with this:
module.controller('directoryCategoryListing', function($scope, $http) {
ons.ready(function() {
console.log($rootScope.CurrentCategory);//it will log
});
});
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>