Navigating to new page from controller using AngularJS and Onsen UI
Question
I have a cross platform app developed using Onsen UI, Monaca and AngularJS.
I am trying to navigate to a new page from a controller when the user clicks a button on my view. I am following a solution from THIS SO post but I keep getting the error: TypeError: Cannot read property 'pushPage' of undefined at Scope.$scope.getDateAndPushPage
I have my view set up to display a listview of dates using ng-repeat and when the user clicks on any of the listview items, I get the selected date item and and use it in my controller to perform some calculations. Once this is done I need to segue to the next page to display the calculations.
My listview looks as follows and displays the list of dates stored in data :
<ul class="list">
<li ng-repeat="myDate in data" class="list__item list__item--chevron" ng-click="getDateAndPushPage(myDate.date)")>
{{myDate.date}}
</li>
</ul>
In my views controller I try and push the new page as with the the example mentioned above as per my code below:
var dateReports = angular.module("dateReportsController", []);
dateReports.controller("DateReportsController", function($scope, $http, $rootScope)
{
$scope.getDateAndPushPage = function (myDate)
{
var page = "date-report-details.html";
console.log("Page: " + page); // OK here - outputs page: date-report-details.html
console.log("My Date: " + myDate); // OK here and do calculation
$rootScope.ons.myNavigator.pushPage(page); // Error here
}
});
And finally in my index.html I have my navigator defined as:
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<!-- Usual content goes here - omitted because not relevant -->
</head>
<body>
<!-- The first page in the navigation stack -->
<ons-navigator var="myNavigator" page="login.html"></ons-navigator>
</body>
</html>
I have tried all the solutions offered on the above mentioned SO post but none seems to be working for me. I have my app setup in such a way that all controllers are split into their separate files to make it easier to manage. To this effect my main app.js file looks as follows and Im not sure is this where the issue is coming from
var app = angular.module("myApp", ['onsen', 'loginController', 'dateReportsController']);
2 answers
solution1
0 2016-05-25 09:40:08
your code is not able to find myNavigator variable. Try changing :
<ons-navigator var="myNavigator" page="login.html"></ons-navigator>
to <ons-navigator id="myNavigator" page="login.html"></ons-navigator>
and use: $rootScope.ons.$get('#myNavigator').pushPage(page);
solution2
0 2016-11-22 10:19:25
To navigate to from page to another page, you can use the following code.
HTML
<ons-navigator var="myNavigator" page="page1.html"></ons-navigator>
In controller
$rootScope.myNavigator.pushPage('page2.html');
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.