Search code examples
javascriptandroidangularjscordovaonsen-ui

Onsen uI:Controll android backbutton routes:


I am developing an android application in cordova using Onsenui,in which i want to navigate to previous page when device backbutton is clicked I am using answer from this question to solve the issue

Here is my code

document.addEventListener("backbutton",onBackButtonPressed, false);
    function onBackButtonPressed(){
            alert('backbutton');
            var element = document.querySelector( ".navigator-container");
            var scope = angular.element( element ).scope();
            scope.popPage();
    }

I will get the following error

"Uncaught TypeError: Cannot read property 'popPage' of undefined"


Solution

  • Probably .navigator-container has been deprecated, that's why I suggest you to get the navigator by using ons-navigator as argument for document.querySelector().

    Here is the fixed code:

    document.addEventListener("backbutton",onBackButtonPressed, false);
        function onBackButtonPressed(){
                alert('backbutton');
                var element = document.querySelector("ons-navigator");
                element.popPage();
    }
    

    EDIT

    Supposing that you are using an older version of Onsen UI, like 1.3.4, and supposing that your navigator has a var='myNavigator' attribute, you can use the following code:

    document.addEventListener("backbutton",onBackButtonPressed, false);
        function onBackButtonPressed(){
                alert('backbutton');
                var element = document.querySelector("ons-navigator");
                var scope = angular.element(element).scope();
                scope.myNavigator.popPage();
    }