后退导航按钮未显示

时间:2014-11-25 07:51:22

标签: angularjs ionic-framework

我是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> 

0 个答案:

没有答案