4

OnsenUI is great. Fast and easy. However, there is not much documentation for controlling Onsen logic in the controller.

Like for instance, I want to do a $location.path('/newpath') inside a controller. How is done in Onsen? I tried "ons.navigator.pushPage('partials/latestjob.html');" in my controller function but doesn't work. Are we limited to ng-click in Onsen to go to another page?

Thanks.

SOF
  • 177
  • 3
  • 12

1 Answers1

2

In Onsen UI 1.04, you can access navigator from inside the controller as follows.

$rootScope.ons.navigator.pushPage('new_page.html');

Another way is 

$rootScope.ons.$get('#navigator').pushPage(pagename);

where #navigator is the id of navigator you put on s.t.

<ons-navigator id="navigator" page="page1.html"></ons-navigator>

This method can choose which navigator you use.

The third way is the one obtaining the navigator scope. For example,

var element = document.querySelector( ".navigator-container");
var scope = angular.element( element ).scope();
scope.pushPage(pagename);

The class name .navigator-container is a built-in class name of onsen ui navigator. This goes well even in onsen ui 1.0.

adding: example of $rootScope

myapp.controller('myCtrl', function($scope, $rootScope) {
  $scope.pushPage = function(pagename) {
    $rootScope.ons.navigator.pushPage(pagename);
  }
});
KNaito
  • 3,930
  • 2
  • 19
  • 21
  • Thanks @KNaito. I actually tried the first method just because it seems logical to do so but I got error particularly with $rootscope. What do I need to declare or inject in the controller as dependencies? – SOF Jun 04 '14 at 13:16
  • I can not run the sample. Does anyone know why I'm getting this error: Cannot read property '$$phase' of null. – Ronald Araújo Dec 22 '14 at 00:18
  • hai @KNaito. do you have an answer for this?http://stackoverflow.com/questions/33513659/onsen-uicontroll-android-backbutton-routes – shamon shamsudeen Nov 04 '15 at 04:30