Is there a way to set parameters for the next page when calling SetMainPage() on sliding menu ?
Something similar to :
myNavigator.pushPage("page2.html", { param1: "value1", param2: "value2" });
but using
myMenu.setMainPage(...);
UPDATE:
I think there is a way to achieve what you want like this:
<body ng-controller="ctrl">
<ons-sliding-menu
menu-page="menu.html" main-page="page1.html" side="left"
var="menu" type="reveal" max-slide-distance="260px" swipeable="true">
<ons-template id="menu.html">
<ons-list>
<ons-list-item modifier="chevron" ng-click="setParam('option1');">
page1
</ons-list-item>
<ons-list-item modifier="chevron" ng-click="setParam('option2');">
page2
</ons-list-item>
</ons-list>
</ons-template>
</body>
And in javascript:
var module = angular.module('app', ['onsen']);
var params = {msg:""};//define a global object
module.controller('ctrl', function($scope){
$scope.setParam = function (msg) {
params.msg = msg;//set the options you want in the object
menu.setMainPage('page1.html', {closeMenu: true});//change the page
}
});
module.controller("page1ctrl" function($scope){
var options = params.msg; // this will give you the options you set earlier
});
The documentation is misleading in this regard. It actually only accepts the closeMenu and callback parameters, not 'custom' as the example indicates. The use of param1 as a parameter example is misleading.
Related
Not sure this is an issue with onsen-ui or me being a newbie with angularjs...
I've got a menu with 2 different popover. I wanted to use the same controler since they are similar. The only difference is the button that call it and the page used for the popover menu. So I have something like this
app.controller('PopoverController', function($scope) {
$scope.popurl = function(url) {
$scope.param = url;
};
ons.createPopover($scope.param,{parentScope: $scope}).then(function(popover) {
$scope.popover = popover;
});
$scope.show = function(e) {
$scope.popover.show(e);
};
$scope.destroy = function(e) {
$scope.popover.destroy(e);
};
});
And it gets called this way
<div class="right" ng-controller="PopoverController">
<ons-toolbar-button id="android-share" ng-click="popover.show($event); popurl('popover_share.html')">
<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); popurl('popover.html')">
<ons-icon icon="ion-android-more-vertical" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
This is not working. if I change ons.createPopover($scope.param,{parentScope: $scope}).then(function(popover) by
ons.createPopover('whatever.html',{parentScope: $scope}).then(function(popover) {
Then it works but obviously display whatever.html all the time
So I guess my first question is why is it working when I hardcode the URL and doesn't when I use a variable ?
The second question is : Is there a simpler way to pass my argument to my controler ?
Thank you for your help !
There are two mistakes in your code:
you are trying to show the popover before it has been created.
when you click the toolbar-button you are calling two functions in sequence, without considering that maybe the second function will finish its execution before the first one. This will give an inconsistent result (the popover will be displayed before the new URL will be initialized).
You can solve your issues by creating the popover inside $scope.popurl(), after the URL has been initialized. You can also show the popover after it has been created. Don't forget to destroy the popover after you close it, as any button click will create a new instance of the popover.
HERE you can find a working CodePen example and here is the code:
HTML
<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-template id="popover_share.html">
<ons-popover direction="up down" cancelable>
<div style="text-align: center; opacity: 0.5;">
<p>This is "popover_share" popover!</p>
</div>
</ons-popover>
</ons-template>
<ons-template id="popover.html">
<ons-popover direction="up down" cancelable>
<div style="text-align: center; opacity: 0.5;">
<p>This is "popover" popover!</p>
</div>
</ons-popover>
</ons-template>
JS
ons.bootstrap()
.controller('PopoverController', function($scope) {
$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);
};
});
Hope it helps!
My code as follows:
module.controller('portfoliosController', function($scope){
$scope.dialogs = {};
$scope.show = function() {
ons.createDialog('managePort.html',{parentScope: $scope}).then(function(dialog) {
dialog.show();
});
};
});
and HTML:
<div class="right" ng-click="show()" style="font-size:22px;color:white;padding-right:10px;margin-top:12px;" ><i class="fa fa-pencil-square-o"></i></div>
<script type="text/ons-template" id="managePort.html">
<ons-dialog var="dlg" cancelable>
<ons-list>
<ons-list-item modifier="tappable">
Foo
</ons-list-item>
<ons-list-item modifier="tappable">
Bar
</ons-list-item>
<ons-list-item modifier="tappable">
Hoge
</ons-list-item>
</ons-list>
</ons-dialog>
</script>
the erorr is Error: undefined is not an object (evaluating 'attrs.length')
Anybody knows the reason？
It seems that you haven't included the controller, you need to include it by using ng-controller="portfoliosController"
I modified a little bit your app, here is a working version:
http://codepen.io/andipavllo/pen/BodgKe
this is my js code :
var application = angular.module('app', ['onsen']);
application.controller('ItemController',function($scope){
$scope.local = [];
$scope.loadPresentation = function(id){};
}
and this is my ons-list :
<ons-list id ="list" style="margin:0px;padding:0px;" ng-controller="ItemController">
<ons-list-item modifier="chevron" ng-repeat="item in local">
<ons-carousel style="height: 100%;width :100%;position: absolute;left: 0;top: 0;" swipeable initial-index="1" auto-scroll>
<ons-carousel-item class="list-action-menu">
<ons-button modifier = "quiet" ng-click="menu.setMainPage('default.html', {closeMenu: true, callback: function(){loadPresentation(0);}});">
{{item.name}}
</ons-button>
</ons-carousel-item>
<ons-carousel-item class="list-action-menu">
<ons-button ng-click="local.splice($index, 1);runtime.local=local">
Remove
<ons-icon icon="ion-trash-a">
</ons-button>
</ons-carousel-item>
</ons-carousel>
</ons-list-item>
</ons-list>
The second button works fine but the first ng-click in the first carousel item is not firing but it works with the function outside the scope when i use onclick.
ng-click expects Angular expressions, what means function declarations are not allowed. Just create the callback in your controller and link it from your view:
$scope.myCallback = function(){
$scope.loadPresentation(0);
};
ng-click="menu.setMainPage('newpage.html', {closeMenu: true, callback: myCallback});".
Hope it helps.
Edit: callback with parameters
$scope.customSetMainPage = function(params) {
$scope.menu.setMainPage('newpage.html', {
callback: function() {
console.log(params);
}
});
};
Hi I am using Onsen as part of a AngularJS Phonegap/Cordova project.
I was wondering is it possible to to automatically close an Onsen notification after a set time. Also is it possible to not include the button?
My current notification is shown below:
var notifyAutoClose = function(title, message) {
var options = {
title: title,
message: message,
buttonLabel: '', //Don't show button if possible
animation: 'default'
};
ons.notification.alert(options);
}
If it is not possible what would be the best non-bootstrap alternative when using AngularJS.
Thank you so much for your time!
You should create a custom dialog using ons-dialog directive.
Check this code (demo):
//HTML
<ons-page>
<ons-toolbar>
<div class="center">Dialog</div>
</ons-toolbar>
<ons-list ng-controller="DialogController">
<ons-list-item ng-click="show('customdialog.html','Dialog title', 'it will close after 2 seconds')" modifier="tappable">
Custom dialog
</ons-list-item>
</ons-list>
</ons-page>
<ons-template id="customdialog.html">
<ons-dialog var="dialog" modifier="android">
<ons-toolbar modifier="android">
<div class="center">{{title}}</div>
</ons-toolbar>
<p style="text-align:center;margin-top:50px">{{message}}</p>
</ons-dialog>
</ons-template>
//JAVASCRIPT
ons.bootstrap()
.controller('DialogController', function($scope) {
$scope.show = function(dlg,title,message) {
$scope.title=title;
$scope.message=message;
ons.createDialog(dlg,{parentScope:$scope}).then(function(dialog) {
dialog.show();
});
setTimeout(function(){dialog.hide()},2000)
}
});
I implemented a controller to store the title of an item and a page link associated with the item.
myApp.controller('takeAwayListCtrl', function($scope)
{
$scope.items = [{itemName: 'Pizze', page: 'pizze_takeaway.html'}, {itemName: 'Pasta', page: 'pasta_takeaway.html'}, {itemName: 'Dessert', page: 'dessert_takeaway.html'}];
});
While the x.itemName is intrepreted correctly, the following code fails to interpret the page attribute x.page correctly when I pass it to the pushPage function for the navigator.
<script type="text/ons-template" id="takeaway.html">
<ons-navigator title="Navigator" var="myNavigator">
<ons-page>
<ons-toolbar>
<div class="center">Take Away</div>
</ons-toolbar>
<ons-list ng-controller="takeAwayListCtrl">
<ons-list-item modifier="tappable" ng-repeat="x in items">
<ons-button ng-click="myNavigator.pushPage( {{x.page}}, { animation : 'slide' } )" modifier="large--quiet">
{{ x.itemName }}
</ons-button>
</ons-list-item>
</ons-list>
</ons-page>
</ons-navigator>
</script>
Do I need to escape something ?
I don't think you need to wrap the x.page with an {{ }}.
Just use it directly like this:
<ons-button ng-click="myNavigator.pushPage(x.page, { animation : 'slide' } )"