About Navigator Pushpage in OnsenUI

Thank you for your continuous support.
When I set OnsenUI to the latest v1.2.2, pushPage with the following code no longer works.

TypeError: Cannot read property 'pushPage' of undefined

The error appears (it worked in v1.2.1 by the way).
PushPage

The $scope.app.navi.pushPage("page.html");

It works, but I don't want to specify the name of the navigator like "app.navi" because I want to use the same child page for multiple navigators.
Please tell me how to deal with it.I look forward to your kind cooperation.

index.html (late head)

<script src="js/app.js"></script>  
</head>

<bodying-controller="AppController">    
<ons-navigator animation="slide" var="app.navi">
  <ons-page>
      <ons-button modifier="light" ng-click="openpage();"> Push</ons-button>
  </ons-page>
</ons-navigator>

<ons-template id="page.html">
  <ons-page>
      <ons-button modifier="light" ng-click="app.navi.popPage('page.html');">Pop</ons-button>
  </ons-page>
</ons-template>
</body> 
</html>

app.js

var module=angular.module('app', ['onsen']);
module.controller('AppController', function($scope){ 
    $scope.openpage=function(){
        $scope.ons.navigator.pushPage("page.html");
    };
});

onsen-ui

2022-09-30 11:35

1 Answers

Recent versions of Onsen UI no longer support the description ons.navigator.Therefore, I think you can solve this problem by explicitly specifying the var attribute of <ons-navigator> and calling the pushPage() method.

HTML side:

<ons-navigator var="myNavigator">

JavaScript side:

myNavigator.pushPage("page.html");

It is not a problem to use the same child page in multiple navigators.
Conversely, multiple navigators can define the same name.

2022-09-30 11:35

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656