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)
}
});
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!
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);
}
});
};
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.
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' } )"
I am currently developing an application that uses Cordova, I use the framework with Onsenui AngularJs and library rn-lazy
My problem is that I try to make my list of image loads, only loads 3 images at once out yet they all charge.
How to ensure that the loading of images is done by 3 of 3 works scroll the phone ?
Template list items
<div ng-controller="QueryRequest">
<div class="loader">
CHARGEMENT
<ons-icon icon="refresh" spin="true"></ons-icon>
</div>
<div data-ng-init="ListItem();">
<ons-list>
<ons-list-item class="topcoat-list__item__line-height ons-list-tweets" ng-repeat=" item in tweets ">
<ons-row class="list-tweet">
<!-- <img ng-src="{{item.Tweet.media_url}}" class="img-response"> -->
<ons-col class="div-image-responsive image-list" ng-click="showLightBox(item.Tweet.media_url)" rn-lazy-background="item.Tweet.media_url" rn-lazy-loaded-class="loaded" rn-lazy-loader="#loader" rn-lazy-loading-class="loading"></ons-col>
<ons-col class="twitter-infos item tabs tabs-secondary tabs-icon-left" size="20">
<ons-button class="btn-custom rating-poll" ng-click="rating('like', item.Tweet.id)" type="large--quiet"></ons-button>
</ons-col>
</ons-row>
</ons-list-item>
</ons-list>
<i class="icon-thumbs-up"></i>
<ons-button class="btn-custom rating-poll" ng-click="rating('dislike', item.Tweet.id)" type="large--quiet"></ons-button>
<i class="icon-thumbs-down"></i>
<ons-button class="btn-custom" ng-click="shareThis(item.Tweet.media_url)" type="large--quiet"></ons-button>
<i class="icon-share"></i>
<p class="tweeter">
<a href="https://twitter.com/{{item.Tweet.username}}" pg-in-app-browser-link="">
#{{item.Tweet.username}}
</a>
</p>
<rating-dialog class="{{modalType}}" show="modalShown" width="100%"></rating-dialog>
<p ng-bind-html="message">{{message}}</p>
</div>
</div>
Controller
App.controller('QueryRequest', function ($scope, $resource, storage, $stateParams, queryRequest, $window, $sce, $rootScope) {
"use strict";
$scope.ListItem = function () {
var request = queryRequest.get();
var tweets = storage.get("twitter_" + request);
if (tweets !== null) {
if (!storage.isObsolete()) {
$scope.tweets = tweets;
} else {
var Tweets = $resource(Clooder.getTweets(request));
Tweets.get({}, function ($query) {
storage.set("twitter_" + request, $query.tweets, 0);
$scope.tweets = storage.get("twitter_" + request);
App.ajaxStop();
});
}
} else {
var Tweets = $resource(Clooder.getTweets(request));
Tweets.get({}, function ($query) {
storage.set("twitter_" + request, $query.tweets, 0);
$scope.tweets = storage.get("twitter_" + request);
App.ajaxStop();
});
}
});
You may have better luck with this library: https://github.com/GeneralElectric/winchjs
Images are loaded based on their own awareness of if they are in the view portal of the screen. There is a lot less (or none) code needed to accomplish your task.
I used jQuery in my AngularJS controller to wait image loading. The following links would help you.
jQuery event for images loaded