Ionisches Routing zu Sub-Seite

Question

Ich habe Probleme beim Einrichten von ionischen, um richtiges Routing zu tun. Möchte, dass es eine andere Seite aufruft und die Zurück-Schaltfläche angezeigt wird.

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> 

Das Problem ist, dass es nicht umleiten wird. Ich hatte eine andere Version, die tat, aber es zeigte nicht die Zurück-Taste oder wenn es dann war, war die Überschrift leer. Also habe ich den Code so geändert, wie er jetzt ist.

Was mache ich hier falsch?

BTW: Gibt es eine Möglichkeit, den Benutzer zu fragen, wenn die Zurück-Taste gedrückt wird. Wie Aufforderung und Frage "Sicher willst du gehen?"

Answer 1

Ich fand, dass die Verwendung der ui-sref= eine einfache Lösung aus dieser post ist.

<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> 
... 

machte die routes.js einfacher

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

auf der neuen Platte Seite versuchen die Zusetzung der Ionen-nav-backbutton Markup in Ionen nav-Bar, die eine Backbutton sollte hinzufügen können Sie auch die docs nach Möglichkeiten, überprüfen Sie die Taste

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

anpassen und über eine schnelle Hinzufügen müssen Sie die benutzerdefinierte Methode anstelle

Vorlage

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

Controller verwenden

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'); 
      } 
     }); 

    }; 
}