javascript - Navigating to new page from controller using AngularJS and Onsen UI -
i have cross platform app developed using onsen ui, monaca , angularjs.
i trying navigate new page controller when user clicks button on view. following solution this post keep getting error: typeerror: cannot read property 'pushpage' of undefined @ scope.$scope.getdateandpushpage
i have view set display listview of dates using ng-repeat , when user clicks on of listview items, selected date item , and use in controller perform calculations. once done need segue next page display calculations.
my listview looks follows , displays 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 views controller try , push new page the example mentioned above per 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 , calculation $rootscope.ons.mynavigator.pushpage(page); // error here } }); and in index.html have navigator defined as:
<!doctype html> <html ng-app="myapp"> <head> <!-- usual content goes here - omitted because not relevant --> </head> <body> <!-- first page in navigation stack --> <ons-navigator var="mynavigator" page="login.html"></ons-navigator> </body> </html> i have tried solutions offered on above mentioned post none seems working me. have app setup in such way controllers split separate files make easier manage. effect main app.js file looks follows , im not sure issue coming from
var app = angular.module("myapp", ['onsen', 'logincontroller', 'datereportscontroller']);
your code not able 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);
Comments
Post a Comment