routes.js

Question

我无法设置离子以进行正确的布线。想要打开另一个页面并显示后退按钮。

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>

问题在于它没有重定向。我有另一个版本，但它没有显示后退按钮或如果它确实然后标题是空的。所以将代码更改为现在的样式。

我在这里做错了什么？

BTW：如果按下后退按钮，有没有办法提示用户。就像提示并问“你肯定要离开吗？”

Answer 1

在新的“记录”页面上尝试在离子导航栏中添加离子导航后退按钮标记，该标记应添加后退按钮，您还可以检查docs以了解自定义按钮的方法

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

如果要添加提示，则需要使用自定义方法

模板

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

    };
}

Answer 2

我发现使用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')

});

离子路由到子页面

routes.js

records.html

2 个答案: