Deep links and back button


#1

I have deep links to nested views, for e.g.: #/news/12. When I type this url into URL bar in browser then app redirects me to the correct view but I don’t see back button.

I would like go back to the news view.

Is it possible to add view (news) to the $ionicHistory?


#2

So what your saying is that you want to create something out of nothing :wink:

Not really going to be possible, since, we can’t create browser history essentially, and that is what $ionicHistory works on.

Besides, an ionic app isn’t meant to live in a browser, so you shouldn’t have this issue.


#3

OK, but I need redirect users from one tab to another. For example. I am on events tab and I would like to go to the news tab and open news with ID=5. How to display back button to news overview on that page?


#4

So $state.go will let you pass parameters, as long as they are defined in your stateProvider

$state.go("tabs.facts", { id: '5' });

Then we can also control animation direction with view-switch.

$ionicViewSwitcher.nextDirection('back');

Then we can also modify the new history stack to prevent any looping.

 $ionicHistory.nextViewOptions({
      historyRoot:true,
      disableBack: true
    });

So if we put all of this together, we can create a function to redirect us, as seen in the codepen.
Then if we need to, we can use an ion-nav-button in place of a back-button.


#5

I am (mis)-using ionic for Web apps, too, and face the same problem. I was thinking about implementing some “ion-nav-back-button-default” attribute directive, so you can specify a default click action or routing href if there is no “back” view in the history stack. I’m wondering if this is something that would be generally useful, and could be added to the back button in ionic proper…


#6

Yes, this would be very useful to many of us :smile:


#7

I digged out this topic because I’m struggling with the same problem. My solution is to test for the initial state change and then navigate the complete view stack to the deep link view:

Angular.module(App)
    .run([
        '$rootScope', '$state', '$timeout',
        function($rootScope, $state, $timeout) {
            $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams, options) {
                if (fromState.name === '') {
                    // drop your deep linkable states here
                    switch (toState.name) {
                        case 'company':
                            event.preventDefault();
                            // Navigate to the first level
                            $state.go('companies');
                            $timeout(function() {
                                // navigate to the second level
                                $state.go(toState.name, toParams);
                            }, 0);
                            break;
                    }
                }
            });
        }
    ]);

If anyone knows a better solution, let me know.