1. 技术文章
  2. Ionic page transition not working to page with push feature

Ionic page transition not working to page with push feature

由 会有一股神秘感。 提交于 2019-12-02 04:03:46

I solved the problem thanks to the help in the comments, so I'm going to write the solution here.

The comment suggested this code so that the push notifications were activated as soon as the app starts.

I'll add here my own code just in case, the alerts and $rootScope variables are for testing purposes.

/* 
   app.js
*/
angular.module('notPush', ['ionic', 'notPush.controllers', 'notPush.factorys'])

.run(function($ionicPlatform,$rootScope) {
  $ionicPlatform.ready(function() {

    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }

    if(window.StatusBar) {
      StatusBar.styleDefault();
    }

    $rootScope.mensajes = [];

    // Push code
    try{
      var pushNotification = window.plugins.pushNotification;
    } catch (ex){

    }
    var successfn = function(result){
      alert("Success: " + result);
    };
    var errorfn   = function(result){
      window.alert("Error: " + result);
    };
    window.casosPush = function(notification){
      switch (notification.event){
        case 'registered':
          if (notification.regid.length > 0){
            alert('registration ID = ' + notification.regid);
          }
          break;

        case 'message':
          alert(JSON.stringify([notification]));
          $rootScope.mensajes.push(notification);
          break;

        case 'error':
          alert('GCM error = ' + notification.msg);
          break;

        default:
          alert('An unknown GCM event has occurred');
          break;
      }
    };
    try{
      pushNotification.register(
        successfn,
        errorfn,
        {
          "senderID": "94XXXXXXXXXX",
          "ecb"     : "window.casosPush"
        }
      );
    } catch(notification){

    } 
  });
})

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider

  .state('splash', {
    url: '/splash',
    templateUrl: 'templates/splash.html',
    controller: 'SplashCtrl'
  })

  .state('registro', {
    url: '/registro',
    templateUrl: 'templates/registro.html',
    controller: 'RegistroCtrl'
  })

  .state('buzonMenu', {
    url: '/buzonMenu',
    templateUrl: 'templates/buzonMenu.html',
    controller: 'BuzonMenuCtrl'
  })

  .state('buzon', {
    url: '/buzon',
    templateUrl: 'templates/buzon.html',
    controller: 'BuzonCtrl'
  })

  .state('detallesSimple', {
    url: '/detallesSimple',
    templateUrl: 'templates/detallesSimple.html',
    controller: 'DetallesCtrl'
  })

  .state('detallesDoble', {
    url: '/detallesDoble',
    templateUrl: 'templates/detallesDoble.html',
    controller: 'DetallesCtrl'
  })

  .state('detallesWV', {
    url: '/detallesWV',
    templateUrl: 'templates/detallesWV.html',
    controller: 'DetallesWVCtrl'
  })

  // If none of the above states are matched, use this as the fallback:
  $urlRouterProvider.otherwise('/splash');

});

A sample code from a working Ionic project. As an example for how PushPlugin should be initialized.

var exapp = angular.module('exapp',
                  ['ionic',
                   'ui.select2',
                   'exapp.controllers',
                   'exapp.services']);

exapp.run(function($ionicPlatform, $state, Notifications, geo) {
    $ionicPlatform.ready(function() {
    try{
        var pushNotification = window.plugins.pushNotification;
    } catch (ex){

    }
    var successfn = function(result){
        // window.alert("S: " + result);
    };
    var errorfn   = function(result){
        // window.alert("E: " + result);
    };
    window.onCB = function(e){
        switch (e.event){
        case 'registered':
        if (e.regid.length > 0){
            localStorage.setItem('registration_id', e.regid);
        }
        break;
        case 'message':
        if (e.foreground){
            navigator.notification.beep(1);
        }
        $state.go('app.notifications');
        break;
        }
    };
    try{
        pushNotification.register(
        successfn,
        errorfn,
        {
            "senderID": "191919191919191",
            "ecb"     : "window.onCB"
        }
        );
    } catch(e){

    }
    });
});

// States
exapp.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider

    .state('app', {
        url: "/app",
        abstract: true,
        templateUrl: "templates/menu.html",
        controller: 'AppCtrl'
    })

    .state('app.profile', {
        url: "/profile",
        views: {
        'menuContent': {
            templateUrl: "templates/profile.html",
            controller: "ProfileCtrl"
        }
        }
    })

    .state('app.login', {
        url: "/login",
        views: {
        'menuContent' :{
            templateUrl: "templates/login.html",
            controller: 'AuthCtrl'
        }
        }
    });

    // if none of the above states are matched, use this as the fallback
    $urlRouterProvider.otherwise('/app/profile');
});

Provided here just in case the gist becomes unavailable.

I had similar problem in my app when i was trying to make a REST call at the same time of view transition. this is because $http promise is interrupting view rendering. This can be taken care of if you wrap your $http call in $timeout because $timeout with no time mentioned will put your $http in queue rather than interrupting current task.

you can do something like

$scope.$on('$cordovaPush:notificationReceived', handleNotification);

handleNotification = function(event, notification){
    $timeout(function(event, notification) {
            switch(notification.event) {
                case 'registered':
                    if (notification.regid.length > 0 ) {
                        alert('registration ID = ' + notification.regid);
                        $scope.regid = notification.regid;
                        var user = { user: 'David', type: 'android', token: notification.regid };
                        $http.post('http://172.16.16.101:8000/tokens', JSON.stringify(user));
                    }
                    break;

                case 'message':
                    // this is the actual push notification. its format depends on the data model from the push server
                    //alert('message = ' + notification.message + ' msgCount = ' + notification.msgcnt);
                    alert(JSON.stringify([notification]));
                    var aux = {title:'',message:'',payload: { valor1:true }}
                    $scope.mensajes.push(notification);
                    break;

                case 'error':
                    alert('GCM error = ' + notification.msg);
                    break;

                default:
                    alert('An unknown GCM event has occurred');
                    break;
            }
        });
}

this is a rough idea that you have to fix and refine to fit your need

标签
android
angularjs
cordova
ionic-framework
phonegap-pushplugin
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!