Am developing app using ionic framework as a frontend and php-mysql as a backend.
Implemented the push notification using google GCM.
Am receiving push notification when anything added in backend.
Required to implement following feature:
Show the number of notification received above the app icon in home screen.
Answers will be much appreciated..
ionic push notification sample https://github.com/hollyschinsky/PushNotificationSample
Badge Is Count for how `much notification successfully send.`
var buildPayload = function (options) {
var notif = new apn.Notification(options.payload);
notif.expiry = options.expiry || 0;
notif.alert = options.alert;
notif.badge = options.badge;
notif.sound = options.sound;
return notif;
};
if (notification.badge) {
$cordovaPush.setBadgeNumber( notif.badge).then(function (result) {
console.log("Set badge success " + result)
}, function (err) {
console.log("Set badge error " + err)
});
}
Create a rootScope variable notificationCount and increment the value of this variable For every notification
Controller
$rootScope.$on('$cordovaPush:notificationReceived', function(event, notification) {
if (notification.badge) {
$cordovaPush.setBadgeNumber(notification.badge).then(function(result) {
$rootScope.notificationCount = notification.badge;
}, function(err) {});
}
});
HTML
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-light" align-title="left">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-icon home-notification-icon button-clear ion-ios-home" ng-click="openHome()">
</button>
<button class="button button-icon button-clear home-notification-icon ion-android-notifications" badge="5" badge-style="badge-assertive">
<span class="badge notification-badge badge-assertive header-badge">{{notificationCount}}</span>
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left" style="background-color: #383839;">
<ion-header-bar class="bar-stable">
<img src="img/logo-web.png">
</ion-header-bar>
<ion-content id="sidemenu">
<!-- Your content goes here -->
</ion-content>
</ion-side-menu>
</ion-side-menus>
Related
I am working on an ionic project.I want to share data between pages. Below is what I have done. But it is not working.Can some one tell me what I am doing wrong.I let the user to add the data to my reminder.html page and I want to show that added data in my meds.html.
This is my services.js
.factory('Authorization', [function() {
authorization = {};
authorization.drug = "";
return authorization;
}]);
This is my controller.js
.controller('reminderCtrl', ['$scope', '$stateParams','Authorization'
function ($scope, $stateParams,Authorization) {
//$scope.user = Authorization;
}])
.controller('medsCtrl', ['$scope', '$stateParams','Authorization',
function ($scope, $stateParams,Authorization) {
//$scope.user = Authorization;
}])
This is my app.js
controller('medsCtrl', function($scope, Authorization) {
$scope.user = Authorization;
})
.controller('reminderCtrl', function($scope, Authorization) {
$scope.user = Authorization;
})
This is my reminder.html. The page that I used to add data.
<button class="button button-royal icon ion-android-done" ng-click = "add(user)" ></button>
</ion-nav-buttons>
<ion-content padding="true" class="has-header">
<form id="reminder2-form7" class="list">
<label class="item item-input" id="reminder2-input9" >
<input type="text" placeholder="Drug" ng-model = "user.drug" >
</label>
This is my meds.html page .This is the page that I want to show the data that I was added to the reminder.html.
<ion-view title="Meds" id="page14">
<ion-nav-buttons side="right" class="has-header">
<button class="button button-royal icon ion-android-add-circle"></button>
</ion-nav-buttons>
<ion-content padding="true" class="has-header">
<ion-list id="meds-list6">
<label class="item item-input" id="meds-search3">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" placeholder="med name">
</label>
<ion-item class="item-thumbnail-left dark" id="meds-list-item21">
<img src="img/CynoZgjCQlSOdh14y24s_drug-disposal.jpg">
<h2dark>Metformin
<p>for diabetes</p>
</h2dark>
</ion-item>
<ion-item class="item-thumbnail-left" id="meds-list-item22">
<img src="img/ZVN6KzlgTP2WdrghQtCH_images.jpg">
<h2>Drug:{{user.drug}}</h2>
</ion-item>
</ion-list>
<a ui-sref="medDiary2" id="meds-button7" class="button button-royal button-clear icon ion-android-add-circle"></a>
<a ui-sref="searchMeds" id="meds-button10" class="button button-royal button-clear icon ion-android-search"></a>
<a ui-sref="reminder" id="meds-button25" class="button button-royal button-clear icon ion-android-alarm-clock"></a>
</ion-content>
</ion-view>
You can use $broadcast in reminderCtrl controller
$scope.addData = function () {
var addObj = {};
// your logic here
$rootScope.$broadcast('add-event', { addedObject: addObj });
}
and listen back to previous event using $on in medsCtrl controller
$scope.$on('add-event', function(event, args) {
var addedObject = args.addedObject;
// Do what you want to do with passed object
console.log(addedObject)
});
Using ionic pull to refresh function does not update my list. Function is called and in console data is retrieved from serve but does not refresh my list.
here is my view:
<ion-list>
<ion-item class="list card" ng-repeat="pickup in pickups">
<div class="item">
<h2>{{pickup.title}}</h2>
<p>Request Date : {{pickup.added_date}}</p>
<p>Status :
<span class="positive" ng-if="pickup.status==0">On Queue</span>
<span class="energized" ng-if="pickup.status==1">On Process</span>
<span class="balanced" ng-if="pickup.status==2">On Collected</span>
<span class="assertive" ng-if="pickup.status==2">Cancelled</span>
</p>
</div>
<div class="item item-body">
<p>Contact : {{pickup.b_contact}}</p>
<p>Location : {{pickup.b_location}}</p>
<p>
<a class="button circular-btn icon ion-android-done button-energized" href="#"
ng-click="statusData(pickup.pickupid,pickup.user_id,1)"
ng-if="pickup.status==0"></a>
<a class="button circular-btn ion-android-done-all button-balanced" href="#"
ng-click="statusData(pickup.pickupid,pickup.user_id,2)"
ng-if="pickup.status==0|| pickup.status==1"></a>
<a class="button circular-btn icon ion-close-circled button-assertive" href="#"
ng-click="statusData(pickup.pickupid,pickup.user_id,3)"
ng-if="pickup.status==0|| pickup.status==1|| pickup.status==2"></a>
</p>
</div>
</ion-item>
</ion-list>
</ion-content>
my controller code:
.controller('AppCtrl', function ($scope, Service, $ionicLoading, $ionicModal, $ionicPopup, $timeout, $state, $http, $stateParams) {
$scope.doRefresh = function () {
Service.getpickup($state, $http).success(function (data) {
$scope.pickups = data.pickup_request;
console.log(data.pickup_request);
})
.finally(function () {
$scope.$broadcast('scroll.refreshComplete');
});
}
});
Please guide me. Thanks in advance.
Have you used the ion-refresher tag in your html? I cant see it in your code. If not, use this
<ion-refresher pulling-text="Pull to refresh..." on-refresh="doRefresh()">
Also, try manually adding the items to your list like this and see if that works. (check that data.pickup_request is an array as well)
$scope.pickups.push.apply($scope.pickups, data.pickup_request);
I have found the issues. I have the view in pickupCtrl but i was calling the scope function in another control. Thank you every one for your guide.Thanks a lot.
So In the Ionic I am using ui-router with nav view but it doesn't seem to work properly:
app.js
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/home.html'
})
.state('app.book', {
url: '/book',
views: {
'menuContent': {
templateUrl: 'templates/book.html'
}
}
})
.state('app.service', {
url: '/service',
views: {
'menuContent': {
templateUrl: 'templates/service.html',
controller: 'ServiceController'
}
}
})
$urlRouterProvider.otherwise('/app/book');
home.html:
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-header-bar align-title="left" class="bar-positive">
<button class="button icon-left ion-navicon-round button-clear " menu-toggle="left"> </button>
<h1 class="title">Maalish</h1>
</ion-header-bar>
<ion-nav-view name="menuContent"></ion-nav-view>//Nav View
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-content>
<ion-list>
<ion-item item-icon-left menu-close href="#/app/splash">
<i class="icon ion-home"></i>
  Home
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
Book.html
<ion-view view-title="book">
<ion-content class="book-content">
Hi
Click
</ion-content>
</ion-view>
Service.html:
<ion-view view-title="service">
<ion-content class="book-content">
Hey
</ion-content>
</ion-view>
So here is the small description:
Home.html-It has the sidemenu required on all the pages/screens its the parent screen
Book.html:Its the deafault and first screen link to service.html
Service.html:Its the second screen.
Problem:
So when I open the app the book.html opens and it has the sidemenu(home.html) but when i click on the link service.html The page opens but it doesnt have sidemenu.If i refresh the link of service.html only then the sidemenu opens.
Sidemenu doesn't appear when redirected from book.html
Solved It you just have to change to I.e change true to false
I'm making a simple app that keeps track of my hours at work. I'm developing the app for android and I'm having a problem with the scrolling.
Structure of the App:
I have a header bar and a footer which are both outside of the < ion-content > tab, so I don't expect that to be scrollable. Within the < ion-content > I have used an < ion-side-menus > tab and finally within the < ion-side-menu-content > tab I have put in a < ion-nav-view > tab which is controlled by my state provider.
Everything works fine, the menu is operational and the views change according to their design. Within one of my views I have a list that exceeds the size HERE IS WHERE THE PROBLEM BEGINS!. When using a computer, I can pull the page down (as if I were trying to refresh it) but when I try to scroll down the page goes straight to the top of the list unless I keep dragging and have my finger on the left click. Furthermore the rest of the content in the list is not loaded. The listed is literally cropped to where it stopped before I dragged down. When I export it to an android app I cant even drag to scroll. The scrolling is literally non-functional.
I've attached some code
var app = angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: "views/home.html",
controller: "MainController"
})
.state('rotas', {
url: '/rotas',
templateUrl: "views/rotas.html",
controller: "MainController"
})
.state('update', {
url: '/update',
templateUrl: "views/update.html",
controller: "UpdateController"
});
$urlRouterProvider.otherwise('/');
});
.scroll {
height: 100%;
}
/* Before i put in this CSS element, the content in the view was cropped SIGNIFICANTLY. not sure exactly what it does but it solved my problem. All other CSS elements are colour changes*/
index.html
<html>
<head>...</head>
<body ng-app="starter" ng-controller="MainController">
<ion-pane>
<ion-header-bar class="bar-stable">
<!--header bar -->
<h1 class="title">Shiftwiz.{{controllerCheck}}</h1>
</ion-header-bar>
<div class="bar bar-footer bar-stable">
<!--footer-->
<table id="footer-table">
<tr>
<td>
<a ui-sref="rotas" ng-click="activity.doRotas()">
<div>Rotas</div>
</a>
</td>
<td>
<a ui-sref="update" ng-click="activity.doUpdate()">
<div>Update</div>
</a>
</td>
</tr>
</table>
</div>
<ion-content>
<ion-side-menus>
<ion-side-menu-content overflow-scroll="true">
<!--menu-->
<button class="button button-full button-positive" ng-click="toggleLeft()">
Rotas: {{activity.rotas}} Update: {{activity.update}}
</button>
<ion-nav-view overflow-scroll="true"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-item>Next Week</ion-item>
<ion-item ng-click="toggleLeft(); activity.chooseThisWeek(); calcDates()">This Week</ion-item>
<div id="further-weeks" ng-show="activity.rotas">
<ion-item>Last Week</ion-item>
<ion-item>Last Two</ion-item>
<ion-item>Last Three</ion-item>
</div>
</ion-side-menu>
</ion-side-menus>
</ion-content>
</ion-pane>
</body>
</html>
update.html
<!-- this view contains the list which isn't rendering-->
<div class="card" ng-repeat="day in unPublishedRota">
<a ng-click="day.toggleState()">
<div class="item item-divider">
<p class="day">{{ day.date | date:"EEEE" }}
<br />{{day.date | date:"d, MMM y"}}</p>
<p class="times">{{day.start}} | {{day.finish}}
<br />{{day.hours}} hrs</p>
</div>
</a>
Your update.html contents should be wrapped in <ion-view> and <ion-content> elements.
<ion-view>
<ion-content>
<div class="card" ng-repeat="day in unPublishedRota">
<a ng-click="day.toggleState()">
<div class="item item-divider">
<p class="day">{{ day.date | date:"EEEE" }}
<br />{{day.date | date:"d, MMM y"}}</p>
<p class="times">{{day.start}} | {{day.finish}}
<br />{{day.hours}} hrs</p>
</div>
</a>
</div>
</ion-content>
</ion-view>
You can also have a look at a working sidemenu example by Ionic.
I'm trying to scroll down to delegate-handle="start" with ionic on load. When i try to run it, i get this message in console.
Delegate for handle "small" could not find a corresponding element with delegate-handle="small"! scrollTop() was not called!
Possible cause: If you are calling scrollTop() immediately, and your element with delegate-handle="small" is a child of your controller, then your element may not be compiled yet. Put a $timeout around your call to scrollTop() and try again.
My code looks like this, can somebody maybe see what is wrong?
$timeout(function() {
$ionicScrollDelegate.$getByHandle('start').scrollTop();
}, 10);
If i use $ionicScrollDelegate.scrollBottom(), it will scroll to the bottom, so it must be a problem with the specific function.
The html code
<ion-view title="Kalender">
<ion-content>
<ion-list ng-repeat="activity in calendar">
<div class="item item-divider" ng-show="activity.date_divider != null" data-year="{{activity.year}}">
<div class="header-divider-small">{{activity.year}}</div>
<div class="header-divider">{{activity.date_divider}}</div>
</div>
<div class="item item-icon-right calendar" ng-show="activity.date_divider == null">
<span class="header">{{activity.name}}</span>
<br />
<span class="text">{{activity.time}} - {{activity.place}}</span>
<a class="button button-icon icon {{activity.icon}} right not-selected"></a>
</div>
</ion-list>
<div delegate-handle="start"></div>
</ion-content>
</ion-view>
Thanks.
Ionic 1.0.0-beta14 has some strange issue with getByHandle() so you can do it this way:
$timeout(function() {
var startHandle = _.find($ionicScrollDelegate._instances, function (s) {
return s.$$delegateHandle === "start";
});
startHandle.scrollTop();
});
Solution source at forum.ionicframework.com
I think there is a misunderstanding about what the delegate handle does here. Delegate handle is a way to name scroll/content containers. Think of it like a way to give your <ion-content> container a unique name that can be later used with the service. It is possible to have multiple <ion-content> containers on a single view, and this is why the naming is necessary. If you only have one scroll area or don't specify the handle, then it just uses the first view it finds.
You want to scroll to a particular place in the application, which is the job of $ionicScrollDelegate.anchorScroll('element-id');. Take a look at your code here with some modifications. I've put the delegate handle in the correct place, and then use the anchorScroll method to automatically scroll to that ID in the page.
Markup
<ion-view title="Kalender">
<ion-content delegate-handle="kalendar">
<ion-list ng-repeat="activity in calendar">
<div class="item item-divider" ng-show="activity.date_divider != null" data-year="{{activity.year}}">
<div class="header-divider-small">{{activity.year}}</div>
<div class="header-divider">{{activity.date_divider}}</div>
</div>
<div class="item item-icon-right calendar" ng-show="activity.date_divider == null">
<span class="header">{{activity.name}}</span>
<br />
<span class="text">{{activity.time}} - {{activity.place}}</span>
<a class="button button-icon icon {{activity.icon}} right not-selected"></a>
</div>
</ion-list>
<div id="start"></div>
</ion-content>
</ion-view>
Controller
$timeout(function() {
$ionicScrollDelegate.$getByHandle('kalendar').anchorScroll('start');
}, 10);
Specify the dalegate-handler in ion-content
<ion-view title="Kalender">
<ion-content delegate-handle="start">
<ion-list ng-repeat="activity in calendar">
<div class="item item-divider" ng-show="activity.date_divider != null" data-year="{{activity.year}}">
<div class="header-divider-small">{{activity.year}}</div>
<div class="header-divider">{{activity.date_divider}}</div>
</div>
<div class="item item-icon-right calendar" ng-show="activity.date_divider == null">
<span class="header">{{activity.name}}</span>
<br />
<span class="text">{{activity.time}} - {{activity.place}}</span>
<a class="button button-icon icon {{activity.icon}} right not-selected"></a>
</div>
</ion-list>
</ion-content>
</ion-view>
Scroll top can be achieved by forgetting the scroll position which can be achieved by using
$scope.$on("$destroy", function() {
var delegate = $ionicScrollDelegate.$getByHandle('start');
delegate. forgetScrollPosition();
});
Use
$ionicScrollDelegate.$getByHandle('start').scrollTop(); //To scroll to Top.
As I noticed delegate-handle won't work if used with overflow-scroll.
I managed to do it this way:
$scope.scrollHandle = some-handle-value-that-you-want-to-use;
$scope.$on('$ionicView.loaded', function () {
$timeout(function () {
scrollView = $ionicScrollDelegate._instances.filter(function (s) {
if (!s.$$delegateHandle) return false;
return $parse(s.$$delegateHandle.slice(2, -2))
(angular.element(s.element).scope()) == $scope.scrollHandle;
})[0];
}).then(function () {
scrollView.scrollTo(0, 0, false);
});
});
In the template:
delegate-handle="{{scrollHandle}}"
EDIT:
This doesn't work anymore, check this answer for new solution: https://stackoverflow.com/a/32123613/1630623