我是Ionic / Angularjs的新手并且正在学习使用它。
我从服务器获取菜单链接并点击,它转到详细页面,但后退按钮没有显示。它在离子的Tab Menu示例中工作。 此外,当我点击浏览器后退按钮,它显示在主页上(我不认为它应该显示?) 谁能告诉我什么是错的?
代码如下:
Controller.js
angular.module('GAC.controllers', [])
.controller('AppCtrl', function($scope, pagesService) {
//GET PAGE LIST
pagesService.fetchFromServer().then( function(list){
$scope.pageList = list;
});
})
.controller('PageCtrl', function($scope, $stateParams, pagesService) {
if(!isNaN(parseInt($stateParams.pageId))){
pagesService.fetchById( $stateParams.pageId ).then(function(page){
$scope.page = page;
});
}else{
alert('No Such Page'); // How to redirect to Homepage
}
})
.factory('pagesService', ['$http', function( $http ){
var service = {};
service.fetchFromServer = function( ){
var promise = $http.jsonp('http://m.aboudcar.com/server/pages/?callback=JSON_CALLBACK')
.then( function(response ){
return response.data;
})
return promise;
};
service.fetchById = function( pageId ){
var promise = $http.jsonp('http://m.aboudcar.com/server/pages/fetchbyid/'+pageId+'?callback=JSON_CALLBACK')
.then( function(response ){
return response.data;
})
return promise;
};
return service;
}])
App.js
angular.module('GAC', ['ionic', 'GAC.controllers'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('app.cars', {
url: "/cars",
views: {
'menuContent' :{
templateUrl: "templates/cars.html",
controller: 'CarsCtrl'
}
}
})
.state('app.single', {
url: "/pages/:pageId",
views: {
'menuContent' :{
templateUrl: "templates/page.html",
controller: 'PageCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/cars');
});
Menu.html
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-stable nav-title-slide-ios7">
<ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<header class="bar bar-header bar-stable">
<h1 class="title">Menu</h1>
</header>
<ion-content class="has-header">
<ion-list>
<ion-item nav-clear menu-close ng-repeat="page in pageList" href="{{page.url}}">
{{page.name}}
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
page.html中
<ion-view title="{{page.name}}">
<ion-content class="has-header">
<h1>{{page.name}}</h1>
{{page.content}}
</ion-content>
</ion-view>