[SOLVED]Cannot navigate with param from map in android device


#1

I’m trying to navigate when clicking on a google map marker and after a lot of struggle its still not working on my android device. The strange this, is that works on the browser and chrome dev tool emulator.

Heres what I have:

App Config:

$stateProvider

  .state('tab', {
    url: "/tab",
    abstract: true,
    templateUrl: "templates/tabs.html"
  })

  .state('tab.map', {
    url: '/map',
    views: {
      'tab-map': {
        templateUrl: 'templates/tab-map.html',
        controller: 'MapCtrl'
      }
    },
    resolve: {
      markers: function(Application){
        return Application.GetMarkers();
      }
    }
  })

  .state('tab.details', {
    url: '/details/:id',
    views: {
      'tab-map': {
        templateUrl: 'templates/details.html',
        controller: 'DetailsCtrl'
      }
    },
    resolve:
    {
      place: function(Application, $stateParams)
      {
        return Application.getLocation($stateParams.id);
      }
    }
  })

  .state('tab.settings', {
      url: '/settings',
      views: {
        'tab-settings': {
          templateUrl: 'templates/tab-settings.html',
          controller: 'SettingsCtrl'
        }
      }
    });

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

In the map controller (MapCtrl):

google.maps.event.addListener(marker, 'click', function () {
    $state.go('tab.details', { id: '1' });
});

The thing is, this only does not work on my device, and if I change the marker click handler to the following, the marker navigates:

google.maps.event.addListener(marker, 'click', function () {
    $state.go('tab.settings');
});

,


#2

do you checked for errors in the console in a browser, if there are any js error?

You can listen to the stateChange evets, to get notified if the app tries to navigate, there you can see, if your state is not found or an error occured while navigating:
http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state

scroll down to “Events”


#3

Thanks for the response @bengtler

The problem is only on my device, the browser works perfect.

Anyhow, I realised I could debug my application with the chrome inspector and found out that a json resource was not being found! I’ll try fix this. It seems to be the problem


#4

maybe you are loading the sources via “//xxxxx googlexxxx” ?
on a device you are running this locally --> so the browser automatically adds “file:” at the beginning.

Or you need to disable some security-policies


#5

that was my problem. I was loading a local resource like this:

$http.get('/resource.json')

Changed it to

$http.get('resource.json')

and now works perfectly. My bad :confused:


#6

hehe^^ i think we all did something like that wrong from time to time :wink:

and now SHAME ON YOU! ^^