JS
app.controller('categoryController', function($scope,$http){
$http.get('http://xxxxxxxxxxxx.com/public/api/v1/category').success(function(response){
$scope.myCategory = response.data;
});
$scope.showSubCategory = function(index) {
var selectedItem = $scope.myCategory[index];
var options = { animation: 'slide' };
$scope.myCategory.selectedItem = selectedItem;
$scope.ons.navigator.pushPage('subcategory.html', options, {name : selectedItem.name});
};
});
HTML/Angular/Onsen
<ons-navigator>
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="app.slidingMenu.toggleMenu()"><ons-icon icon="bars"></ons-icon></ons-toolbar-button>
</div>
<div class="center">Home</div>
<div class="right">
<ons-toolbar-button ng-click="app.slidingMenu.toggleMenu()"><ons-icon icon="fa-search"></ons-icon></ons-toolbar-button>
</div>
</ons-toolbar>
<ons-list ng-controller="categoryController" id="category-lists">
<ons-list-item modifier="chevron" class="item" ng-repeat="item in myCategory" ng-click="showSubCategory($index)">
<ons-row>
{{item.name}}
</ons-row>
</ons-list-item>
</ons-list>
</ons-page>
</ons-navigator>
Error
TypeError: Cannot call method 'pushPage' of undefined at Scope.$scope.showSubCategory (file:///data/data/com.example.helloworld/files/projects/cloud/558d3c277e2193c742d69fea/www/components/app.js:16:27) at file:///data/data/com.example.helloworld/files/projects/cloud/558d3c277e2193c742d69fea/www/components/loader.js:1439:30512 at file:///data/data/com.example.helloworld/files/projects/cloud/558d3c277e2193c742d69fea/www/components/loader.js:1448:18904 at Scope.$eval (file:///data/data/com.example.helloworld/files/projects/cloud/558d3c277e2193c742d69fea/www/components/loader.js:1437:28127) at Scope.$apply (file:///data/data/com.example.helloworld/files/projects/cloud/558d3c277e2193c742d69fea/www/components/loader.js:1437:28433) at HTMLElement.listener (file:///data/data/com.example.helloworld/files/projects/cloud/558d3c277e2193c742d69fea/www/components/loader.js:1448:18886) at HTMLElement.eventHandler (file:///data/data/com.example.helloworld/files/projects/cloud/558d3c277e2193c742d69fea/www/components/loader.js:1434:29261) at FastClick.sendClick (file:///data/data/com.example.helloworld/files/projects/cloud/558d3c277e2193c742d69fea/www/components/loader.js:1441:13284) at FastClick.onTouchEnd (file:///data/data/com.example.helloworld/files/projects/cloud/558d3c277e2193c742d69fea/www/components/loader.js:1441:17447) at HTMLBodyElement. (file:///data/data/com.example.helloworld/files/projects/cloud/558d3c277e2193c742d69fea/www/components/loader.js:1441:10005)
Hi, I have use monaca.pushPage(subcategory.html, .....) and no error but can't move to subcategory.html page.
Any help appreciated.
ons
variable does not store the navigators anymore. You must usevar
attribute in the navigator and give it a name to call it afterwards. For example:And then use it with
myNavigator.pushPage(...)
. More info here: http://onsen.io/reference/ons-navigator.htmlHope it helps!