Cordova AngularJS navigation on app return from external URL not remembering history

Question

I'm working on a Cordova application using Ionic (with AngularJS) and I have hit a problem. My app has external links that open in a browser. When I tap on these links I am taken to the web page, however upon hitting the back button to return to the app, I have lost my back button and my home button does not work, effectively rendering my navigation useless. I'm not entirely sure how to handle this, as if I simply leave the app and re-enter it navigation works fine so it seems to be when linked to something from the app itself. It happens on Android and on my computer running the files in my web browser. Ideally getting navigation to remember where it was and provide accurate 'back' functionality would be great, but even just sending me back to the home page would be useful. I've looked a little into routing and locations, though I'm not quite sure how they fit into a Cordova App. Any guidance would be appreciated, as I am fairly new to angularJS.

app.js

var app = angular.module('app', ['ionic']);

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

    $stateProvider
      .state('tabs', {
          url: "/tab",
          abstract: true,
          templateUrl: "templates/tabs.html"
      })
      .state('tabs.home', {
          url: "/home",
          views: {
              'home-tab': {
                  templateUrl: "templates/home.html",
                  controller: 'HomeTabCtrl'
              }
          }
      })
      .state('tabs.resources', {
          url: "/resources",
          views: {
              'home-tab': {
                  templateUrl: "templates/resources.html",
                  controller: "AdditionalResourcesCtrl"
              }
          }
      })
      .state('tabs.gmetrics', {
          url: "/gmetrics",
          views: {
              'home-tab': {
                  templateUrl: "templates/gmetrics.html",
                  controller: "GlobalMetricsCtrl"
              }
          }
      })
      .state('tabs.gfeed', {
          url: "/gfeed",
          views: {
              'home-tab': {
                  templateUrl: "templates/gfeed.html"
              }
          }
      })
      .state('tabs.googleforms', {
          url: "/googleforms",
          views: {
              'home-tab': {
                  templateUrl: "templates/googleforms.html"
              }
          }
      })
      .state('tabs.social', {
          url: "/social",
          views: {
              'home-tab': {
                  templateUrl: "templates/social.html",
                  controller: "SocialNetworkCtrl"
              }
          }
      })
    .state('tabs.chapters', {
        url: "/chapters",
        views: {
            'home-tab': {
                templateUrl: "templates/chapters.html"
            }
        }
    });

    $urlRouterProvider.otherwise("/tab/home");

});

app.config(['$ionicConfigProvider', function ($ionicConfigProvider) {

    $ionicConfigProvider.tabs.position('bottom'); //other values: top

}]);
/*
app.config( ['$compileProvider', function( $compileProvider ){   
    $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto):/);
}]);
*/

Partial index.html:

Linson · Accepted Answer

Try to open the external link with window.open(url,'_blank'); by using inappbrowser

Cordova AngularJS navigation on app return from external URL not remembering history

Answers (1)

Related Questions