サブページへのイオン経路

Question

適切なルーティングを行うためにionicを設定する際に問題があります。別のページをアップし、戻るボタンを表示させたい

routes.js

angular.module('app.routes', []) 
.config(function($stateProvider, $urlRouterProvider) { 
    // Learn more here: https://github.com/angular-ui/ui-router 
    $stateProvider 

    .state('records', { 
    url: '/records', 
    templateUrl: 'templates/records.html', 
    controller: 'RecordsCtrl' 
    }) 

    .state('records-newRecord', { 
    url: '/records/newRecord', 
    templateUrl: 'templates/newRecord.html', 
    controller: 'newRecordCtrl' 
    }) 

    $urlRouterProvider.otherwise('/records') 

}); 

records.html

<ion-view title="Records" id="main"> 
    <ion-nav-bar> 
    <!-- ADD BUTTON--> 
    <ion-nav-buttons side="primary"> 
     <button class="button button-icon ion-plus-circled" href="#/records/newRecord"></button> 
    </ion-nav-buttons> 

    <!--SEARCH BUTTON--> 
    <ion-nav-buttons side="secondary"> 
     <button class="button button-icon ion-search" ng-click="toggleSearchBar()"></button> 
    </ion-nav-buttons> 
    </ion-nav-bar> 

    <ion-content padding="true" class="has-header"> 

    <!-- SEARCH BAR --> 
    <div ng-show="showSearchBar"> 
     <label class="item item-input"> 
     <i class="icon ion-search placeholder-icon"></i> 
     <input type="search" placeholder=""> 
     </label> 
    </div> 

    <!-- LIST OF RECORDS --> 
    <form class="list"> 
     <ion-item class="item-thumbnail-left"> 
     <img src="img/pQqcmU4fR8GSvP092hQN_Lockreal72.jpg"> 
     <h2>Temp. Logger PC4</h2> 
     <p>SN C001517 A</p> 
     </ion-item> 
    </form> 

    </ion-content> 

</ion-view> 

問題は、それがリダイレクトしないということです。 もう1つのバージョンがありましたが、戻るボタンが表示されませんでした。それで今のコードに変更されました。

私はここで間違っていますか？

BTW：戻るボタンが押された場合にユーザーに確認する方法はありますか？プロンプトを表示して、「あなたは残しておきたいですか？あなたもボタン

<ion-nav-bar> 
    <ion-nav-back-button> 
    </ion-nav-back-button> 
</ion-nav-bar> 

をカスタマイズする方法をdocsを確認することができます戻るボタンを追加する必要があり、イオンナビゲーションバーにイオン-NAV-戻るボタンのマークアップを追加する新しいレコード]ページの試行で

Answer 1

ui-sref=を使用していることがわかりました。このpostからの簡単な解決策です。

<ion-view view-title="Records" id="main"> 
    <ion-nav-bar class="bar-stable"> 
    <!-- ADD BUTTON--> 
    <ion-nav-buttons side="primary"> 
     <button class="button button-icon ion-plus-circled" ui-sref="newrecord"></button> 
    </ion-nav-buttons> 
... 

routes.jsよりシンプル

angular.module('app.routes', []) 
.config(function($stateProvider, $urlRouterProvider) { 
    // Learn more here: https://github.com/angular-ui/ui-router 
    $stateProvider 

    .state('records', { 
    url: '/records', 
    templateUrl: 'templates/records.html', 
    controller: 'RecordsCtrl' 
    }) 

    .state('newrecord', { 
    url: '/newrecord', 
    templateUrl: 'templates/newRecord.html', 
    controller: 'newRecordCtrl' 
    }) 

    $urlRouterProvider.otherwise('/records') 

}); 

Answer 2

そして

<ion-nav-bar ng-controller="MyCtrl"> 
    <ion-nav-back-button class="button-clear" 
     ng-click="myGoBack()"> 
     <i class="ion-arrow-left-c"></i> Back 
    </ion-nav-back-button> 
</ion-nav-bar> 

テンプレート

代わりにカスタムメソッドを使用する必要がありますプロンプトの追加についてのコントローラ

function MyCtrl($scope, $ionicHistory, $ionicPopup) { 
    $scope.myGoBack = function() { 
     $ionicPopup.confirm({ 
      title: 'Leaving', 
      template: 'Are you sure you want to leave?' 
     }).then(function (res) { 
      if (res) { 
       $ionicHistory.goBack(); 
      } else { 
       console.log('You are not sure'); 
      } 
     }); 

    }; 
}