@MeetingHand wrote:

THE SITUATION:

I am using Ionic Push notifications in my app.

Everything is working fine.

When the user send a message, the notification will be fired through a cURL request, and it will arrive only if the receiver has the app off or in background.

I have just a problem handling the onClick callback.

Following the documentation I have put the callback function in the onNotification parameter.

"onNotification": This function will be called when your device receives a notification, and provided with the notification object received.

What I need to do, when the user click on the notification, is to redirect him to a certain page.

It is working.

The problem is that when the user is inside the app, it will be automatically redirected to that page everytime he will receive a message. When the notification is fired by not actually received because the app is in foreground

And in this the onNotification will be called anyway...

THE CODE:

.run(function($ionicPlatform, $rootScope, $location, $state) {

  $ionicPlatform.ready(function() {

    var push = new Ionic.Push({

        "debug": true,
        "onNotification": function(notification)
        {
            if ( $state.current.name != 'app.attendee-chat' )
            {
                $rootScope.get_my_account_data();
                $location.path('app/attendee_list');
            }
        },
        "onRegister": function(data)
        {
            console.log(data.token);
        },

    });

THE QUESTION:

How can I manage to setup a callback function that will be called ONLY when the user actually click on the notification, and not when he is inside the app?

I have to do some tricks inside the onNotification or there is a possibility to setup a onClick callback?

Thank you!

Posts: 1

Participants: 1

Read full topic

@Sebastianor wrote:

Hello. I create simply canvas view with Signature Pad from (https://github.com/szimek/signature_pad). I would like to zooming the canvas. The problem is when I change the zoom, signature pad reads wrong position of my finger and draw line in another place.
Here's my html code
<ion-scroll zooming="true" id="myCanvas" min-zoom="0.5" max-zoom="2" direction="xy" delegate-handle="canvas" overflow-scroll="false" style="width: 90%; display: block; margin: 0 auto; max-width: 1240px; border: 1px solid black; background-color: #fff;">
<canvas height="1754" width="1240" id='signatureCanvas'></canvas>
</ion-scroll>
Thanks for help.

Posts: 1

Participants: 1

Read full topic

@danielgroh wrote:

We have an ion-item-group with aprox 30 items. It looks like this:

<ion-item-group *ngFor="let module of models, let i = index" [class.highlight]="hightlightStatus[i]">
    <ion-item>
        <progress value="{{module.progress}}" max="100"></progress>
        <span>{{module.progress}}%</span>
    </ion-item>
    <ion-item>
        <ion-card (click)="buttonbarItemIndex=i">
            <ion-card-header>
                {{breadcrumb}}
            </ion-card-header>
            <ion-card-content>
                {{module.title}}
            </ion-card-content>
        </ion-card>
    </ion-item>
    <ion-item *ngIf="hightlightStatus[i]">
        <button-bar [target]="module.target"></button-bar>
    </ion-item>
</ion-item-group>

On older devices the page does not get loaded. Probably because there are too much DOM Elements to be rendered.

Would be the recommendation to use InfiniteScroll or to replace ion-item with normal divs?

As you can see in the code, the ion-item has ion-card in it and I think this is not so light weight.

We would not like to use divs as we are trying to work as semantic as possible.

Posts: 5

Participants: 2

Read full topic

@brad426 wrote:

I have a simple set of pages controlled by a parent component.

import {Component} from '@angular/core';
import {HomePage} from '../home/home';
import {ContactPage} from '../contact/contact';

@Component({
  template: `
  <ion-tabs>
      <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
      <ion-tab [root]="tab2Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
  </ion-tabs>
  `
})
export class TabsPage {

  private tab1Root: any;
  private tab2Root: any;

  constructor() {
    this.tab1Root = HomePage;
    this.tab2Root = ContactPage;
  }
}

When tab 2 is selected it displays the contact page, which has a ionViewDidEnter function.
This function is only ever called once, the first time the contact page is viewed, navigating back to the home page, and then returning to the contact page does not trigger the ionViewDidEnter function.

What lifecycle event should I be using to get notified whenever the contact page gets displayed/activated?

Posts: 1

Participants: 1

Read full topic

@estevammr wrote:

Hello guys,
I'm trying to do this a few hours and not succeeding.

I have a promise of $cordovaGeolocation returning latitude and longitude very basic equal to the ngCordova documentation.

I want to know how do I return the latitude and longitude in an array I have outside the function.

How can I do this???

Following the code structure.

$cordovaGeolocation.getCurrentPosition().then(function(position) {
  var lat = position.coords.latitude;
  var long = position.coords.longitude;
  alert(lat + " | " + long);
}, function (err) {
     console.log("fail");
});

var deviceInfo = {
  uuid: uuid,
  dataDevice: [
    {
      model: model
    }
  ]
};

Thank you

Posts: 1

Participants: 1

Read full topic

@vpsouza wrote:

Anyone had grouped states at different angular modules? Image may be NSFW.
Clik here to view.

Posts: 1

Participants: 1

Read full topic

@nottinhill wrote:

When will Ionic 2 beta run against Angular RC5?

We need this for ngrx store which uses either Angular RC0 or Angular RC5.

Posts: 4

Participants: 2

Read full topic

@rickdana wrote:

Hello,
I'm trying to use the ionic Native Map in my App.
here is my code:
`this.platform.ready().then(() => {
this.map = new GoogleMap('article-details-map');

  GoogleMap.isAvailable().then(() => {

    this.map.one(GoogleMapsEvent.MAP_READY).subscribe((data) =>{
      console.log('Map is ready!');
      alert("GoogleMap.onMapReady(): " + JSON.stringify(data));
    });
  });

});`

I have test the code on a real device and with the Chrome inspector i get this error

EXCEPTION: Error: Uncaught (in promise): TypeError: _this.map.one(...).subscribe is not a function

Posts: 1

Participants: 1

Read full topic

@DavidBarishev wrote:

Hello!
I am developing an application using ionic. The platforms i target are mobile phones application (Not through the browser).My application depends on this library node-ytdl-core. I want to be able to call the library from my ts files .

Now i have some question :

1. How can i install this js library ? What is the preferred way? i have researched a bit and i found this ways:

   • Use ionic add , but its deprecate.
   • Use bower to install the package via the git link. But the project doesn't seems to rely on bower, but rather on npm.One more thing is that i cant find the library on bower, but its on NPM.
   • Use npm to install the library, for me this is the most straight forward method. But i have read that you shouldn't mess with the npm dependencies because its manged only for the ionic project dependencies and native plugins.

2. Can the ionic/cordova even run Node.js modules? It seems logical since cordova and ionic are written in Node.js, but i have read that its not the case, also there are repositories that add the support, like jxcore-cordova . Is this plugin necessary even if the module is written in pure js?

3. How to access the library ?Lets say i have installed the library, how can i call it from ts ? since typescript can have javascript inside of it, and can run other js files, how should i call the lib ?Is it just easy as importing it regularly?
   import {ytdl-core} from 'node-ytdl-core'
   Or do i have to call node.js files separately?

Any help is much appreciated.

Posts: 3

Participants: 2

Read full topic

@Sky99 wrote:

I have problem inside array that looping inside array.
This my html code:

Daftar Kuliner

<ion-content padding class="kuliner-index">
  <ion-list *ngFor="let jen of jenis; let i = index">
    <ion-list-header>{{jenisNama[i]}} </ion-list-header>
    <ion-item  *ngFor="let kuliner of kuliners[i]">
        <img src="{{kuliner.main_img}}" style="width:50px;height:50px;margin:auto" >
        {{kuliner.nama}}<br/>
        <ion-icon name="md-star"></ion-icon> {{kuliner.rating}} / 5.00
    </ion-item>
    <br/><br/>
  </ion-list>
</ion-content>

The problem is in kuliners[i] variable. Each seems like wrong access inside kuliners and each time i am refreshing kuliners[i]. It is like random access. I want for jenis[0], the kuliners that accessed is kuliners[0].

This is my ts file:
import {Page, NavController} from 'ionic-angular';
import {KulinerService} from '../../providers/kuliner-service/kuliner-service';

@Page({
  templateUrl: 'build/pages/kuliner-index/kuliner-index.html',
  providers: [KulinerService]
})
export class KulinerIndexPage {
  public jenis : Number[] =null;
  public jenisNama : String[] = null;
  public jenisShow : boolean[] = null;
  public kuliners: Array<any> = null;
  private timer ;
  constructor(public nav: NavController, public kulinerService : KulinerService) {
    this.jenis = [1,2,3,4];
    this.jenisNama = ['Appetizer (Hidangan Pembuka)','Main Course (Hidangan Utama)','Dessert (Hidangan Penutup)','Minuman Spesial'];
    this.kuliners = new Array<any>();
    this.jenisShow = new Array<boolean>();
    this.loadKuliner();
  }

  loadKuliner()
  {
      for(var i=0;i<this.jenis.length ; i++)
      {
        alert(this.jenisNama[i]);
          this.kulinerService.loadKulinerByJenis(this.jenis[i])
            .then(dataResto => {
                this.kuliners.splice(i, 0, dataResto);
                this.jenisShow.push(false);
          })
      }
  }
}

The last strange things is when i use the alert inside looping in loadKuliner() method the kuliners is accessed correctly. But if i am remove the alert , the kuliners is become wrong again (like random). Thanks...

Posts: 1

Participants: 1

Read full topic

@doonot wrote:

Hi

I am having some trouble in the following case: I have a profile page that lists the user profile. The user can click an edit button to edit all user related information. Once the user saved the page, they navigate back to the profile page that should ideally be updated automatically.

Now I am missing kind of an event that triggers, when a user navigates to a page. window.onLoad() does only work once, same for window.onPageShow(). window.onPopState() is triggered when the user goes away from the page.

My idea was to rely on such an event, then call $scope.init() which downloads the user information and sets it to the view.

Thanks for any hints!

Posts: 2

Participants: 2

Read full topic

@chrismunn wrote:

Does anyone have any examples or can point me in the right direction on how to setup aws within Ionic 2?

I tried running this code:

npm install aws-sdk --save
typings install dt~aws-sdk --save --global

But when i try to build or run in browser I get:

TypeScript error: typings/globals/aws-sdk/index.d.ts(1575,24): Error TS2304: Cannot find name 'Buffer'.

Fairly new to Ionic2 so how would I go about importing this sdk to use?

Thanks in advance

SDK Link: https://www.npmjs.com/package/aws-sdk

Posts: 1

Participants: 1

Read full topic

@littlefirecode wrote:

Hi,

I'm wondering has anyone here ever tried to integrate the ArcGIS v3 API with an Ionic 2 application. I've been trying to follow an Angular 2 example (couldn't find an Ionic 2 sample) and I'm getting this error on running:

cannot find module 'esri-mods'

I've been trying to find a solution, but haven't found one yet. Anyone ever encounter this?

Thanks,

Frank.

Posts: 1

Participants: 1

Read full topic

@pkudrle wrote:

I want to get a pull down menu just above the ion-footer but having a hard time finding the right css setting to get the div correct.
<ion-header-bar class="bar-calm">
<h1 class="title">Header</h1>
</ion-header-bar>
<ion-content
<div><span>content that will fill up most of screen</span></div>
</ion-content>
<div>
<label class=" item item-input item-select">
<div class="input-label">
This pulldown needs to be at the bottom and just above the ion-footer
</div>
<select ng-model="selectedOption" ng-change="sendButtonMessage(selectedOption)">
<option ng-repeat="option in options">{{option}}</option>
</select>
</label>
</div>
<ion-footer>footer</ion-footer>

Posts: 1

Participants: 1

Read full topic

@leugim_ohlavrac wrote:

Hi everyone,

I'm facing a problem with my app, and I need your help..

I'm using cordovaFileTransfer plugin and works fine, the problem is when I'm test it on android >6.0... give me the next error: > "Open failed: EACCES (Permission denied)" when I try download a file.
I read about it and seems like a new security permissions in the marshmallow..
I tried insert in the config.xml file the next:

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

But didn't work, how I can enable the permissions?
Thank you alll

Posts: 1

Participants: 1

Read full topic

@ryanhow wrote:

Hi!.

When opening a modal from a popover I do the following (pseudo-code)

this.viewCtrl.dismiss().then(()=>openModal());

The problem being that there is quite a long delay while the popup dismisses, then the modal opens.

How would I go about making this more responsive?

Any other way about it I seem to go leaves the popup open, or the modal is closed instantly and the popup remains open.

The docs here don't even list the dismiss method?

http://ionicframework.com/docs/v2/api/components/nav/ViewController/

Running beta11.

Posts: 2

Participants: 1

Read full topic

@praroh1 wrote:

I've followed the following steps to create an app:

ionic start ionic-maps blank
cd ionic-maps
ionic setup sass
ionic platform add android
bower install ngCordova

Added the following lines to index.html:

<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>

Changed app.js to include ngCordova:

angular.module('starter', ['ionic', 'starter.controllers', 'ngCordova'])

Installed the geolocation plugin:

cordova plugin add cordova-plugin-geolocation

app.js:

.state('app.location', {
  url: '/location',
  views: {
    'menuContent': {
      templateUrl: 'templates/location.html',
      controller: 'LocationCtrl'
    }
  }
})

location.html:

<ion-view view-title="Search">
  <ion-content>
    <h1>Location: {{location}}</h1>
  </ion-content>
</ion-view>

controllers.js:

.controller('LocationCtrl', function($scope, $state, $cordovaGeolocation) {
  $scope.location = 'Waiting';

  var options = {timeout: 10000, enableHighAccuracy: true};
  $cordovaGeolocation.getCurrentPosition(options).then(function(position) {
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;
    console.log(lat, lng);
    $scope.location = lat + ' ' + lng;
  }, function(error) {
    console.log('Could not get location: ', error);
    $scope.location = 'Could not get location: ' + error + ' :: ' + JSON.stringify(error);
  });
})

If I open the /location endpoint in my phone's browser (using ionic serve) I'm shown my current location correctly. So far everything works as expected.

/platforms/android/AndroidManifest.xml has the following lines in it:

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

I'm building the app using the new cloud package builder using ionic package build android.

I expected that I'll be asked for location permission while installing the app from apk. But I'm only asked for full network access. On visiting the /locations screen I get an error [object PositionError. json.stringify(error) is {} and Object.keys(error).length is 0.

PS: I've ensured that GPS is enabled and it works on other apps.

Posts: 1

Participants: 1

Read full topic

@crystaltaggart wrote:

Question 1: How does one add ngCordova to their project?
Question 2: Is there a way to create 'templates' that are shown across screens? For example, in Appery.io I create a template that has the menu/footer buttons so when I add a new menu item it's available on all screens. Or like an 'include' file?
Question 3: I'm finding the Ionic creator slow. I'm using Chrome. Is there any magic here to make it faster (and please don't say buy a faster machine. I have a brand new laptop.)
Question 4: Does anyone from Ionic actually monitor these forums? I'm finding a bunch of questions with 0 answers.
Question 5: I'm finding the Android emulator doesn't look the same as the IOS emulator (my footer shows up at the top.) Any reason why?

Posts: 1

Participants: 1

Read full topic

@balasivagnanam wrote:

I am writing an events app, in this there is a part called my events which has all the events that I register for. This is fetched using REST API,
So wherever I fetch this I need to hold this list in my app. And also send a notification in the app before 1 hour of the event.

Wondering how to do it. Simpler way I see is using "add to calendar" as button i event list and use cordova calendar plugin. or we can automatically add to calendar when fetching the list.

Is there any other way to do this? without interacting with mobile's calendar?

Posts: 2

Participants: 2

Read full topic

@mihir77 wrote:

Hi guys i am getting this error when i build for android - ionic build android

error -

WARN: ionic.project has been renamed to ionic.config.json, please rename it.
Uh oh! Looks like you're missing a module in your gulpfile:
Cannot find module 'gulp'

Do you need to run `npm install`?

I am unable to find the issue for this error..Plz help..its urgent..i was able to build properly few days back..

Posts: 3

Participants: 2

Read full topic