Onsen-UI: how to update the ons-screen page attribute and reload the view?

StackOverflow https://stackoverflow.com/questions/23506102

Question

I've just started using Onsen UI by implementing the bootstrap example and I've been trying to get the view to update when I change the page attribute.

<body ng-controller="PageLoadingCtrl">
<ons-screen page="{{loadedPage}}"></ons-screen>
</body>

My controller's code:

app.controller('PageLoadingCtrl', ['$scope', '$timeout', 'notificationService',
    function($scope, $timeout, sharedService){
        $scope.loadedPage = "index.html";
        $scope.updatePage =  function(page){
            $timeout( function (){
                $scope.loadedPage = page;
                $scope.$apply();
            }, 500);
        };
        $scope.$on('changePage', function (event, message){
            $scope.updatePage(message);
        });
    }
]);

As you can see I'm using a controller on the body object so that I can update the loadedPage variable however, when I fire the changePage event, the view doesn't change. After checking the DOM elements with web inspector I can see that page attribute is equal to whatever I pass to the updatePage function.

So far I tried to force a refresh with $apply and $digest but that still doesn't do the trick.

Cheers!

Was it helpful?

Solution

Because ons-screen need to maintain page stack. it's not intuitive to use binding for the page attribute.

Using ons.screen.presentPage()/dismissPage()/resetPage() is the preferred way.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top