Question

我使用离子幻灯片菜单和多个视图之间的导航创建了应用程序。

例如，我有View-A View-B和View-C。

如果我曾经将View-A导航到View-B并返回主屏幕，则启用切换左滑动菜单按钮。

如果我曾经将View-A导航到View-B然后导航到View-C并返回主屏幕，则切换左侧滑动菜单按钮被禁用。

让我解释下面的代码：

tabs.html

<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button> Back
</ion-nav-back-button>

<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>

<!-- Logout -->
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-ios-person-outline" on-tap="doLogout()"></button>
</ion-nav-buttons>

</ion-nav-bar>


<ion-tabs class="tabs-icon-top tabs-color-active-positive">

<!-- Activity Tab -->
<ion-tab title="Activity" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/userActivity">
<ion-nav-view name="tab-userActivity"></ion-nav-view>
</ion-tab>

<!-- Scheduled Tasks Tab -->
<ion-tab title="Call Lists" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/overallCallsCtrl">
<ion-nav-view name="tab-overallCallsCtrl"></ion-nav-view>
</ion-tab>

<!-- Dashboard -->
<ion-tab title="Dashboard" icon-off="ion-ios-people-outline" icon-on="ion-ios-people" href="#/tab/dashboard">
<ion-nav-view name="tab-dashboard"></ion-nav-view>
</ion-tab>

</ion-tabs>

</ion-side-menu-content>

<!-- Side Menu (left) -->
<ion-side-menu side="left">
<ion-header-bar class="bar-positive">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content class="customSlide">

<ion-list>

<ion-item class="item item-avatar">
<img src="img/men.png"><br>Welcome John!
</ion-item>

<ion-item menu-close href="#/tab/userActivity">
<i class="ion-ios-list-outline"></i>
Activity
</ion-item>

<ion-item menu-close href="#/tab/installationCall">
<i class="ion-ios-cloud-download-outline"></i>
Installation
</ion-item>

<ion-item menu-close href="#/tab/correctiveMaintenanceCall">
<i class="ion-ios-settings"></i>
Corrective Maintenance
</ion-item>

<ion-item menu-close href="#/tab/preventiveMaintenanceCall">
<i class="ion-ios-settings"></i>
Preventive Maintenance
</ion-item>

<ion-item menu-close href="#/tab/calibrationCall">
<i class="ion-ios-pulse"></i>
Calibration
</ion-item>


</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>

app.js

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('revolApp', ['ionic', 'revolApp.UserSignInController','revolApp.DashboardController','revolApp.ActivityController','revolApp.CalibrationController','revolApp.CorrectiveMaintenanceController','revolApp.PreventiveMaintenanceController', 'revolApp.InstallationController','revolApp.ScheduledCallsController','revolApp.AddCallController','revolApp.AssignCallController','revolApp.CloseCallController','revolApp.ResponseCallController','revolApp.ScheduleCallController','revolApp.FeedbackController','revolApp.TabController','revolApp.OverallCallsController'])

.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);

}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})

.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {

/*
// note that you can also chain configs
$ionicConfigProvider.backButton.text('Back');
*/

// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js


$stateProvider

// State to represent Login View
.state('userSignIn', {
url: '/userSignIn',
cache: false,
templateUrl: 'View/SigninView.html',
controller: 'UserSignInCtrl',

})

// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
cache: false,
abstract: true,
templateUrl: 'View/tabs.html',
controller: 'TabCtrl'
})

.state('tab.userActivity', {
url: '/userActivity',
cache: false,
views: {
'tab-userActivity': {
templateUrl: 'View/ActivityView.html',
controller: 'ActivityCtrl'
}
}
})

.state('tab.scheduledInsideTabCalls', {
url: '/scheduledInsideTabCalls',
cache: false,
views: {
'tab-userActivity': {
templateUrl: 'View/ScheduledCallsView.html',
controller: 'ScheduledCallsCtrl'
}
}
})

.state('tab.addCall', {
url: '/addCall',
cache: false,
views: {
'tab-userActivity': {
templateUrl: 'View/AddCallView.html',
controller: 'AddCallCtrl'
}
}
})

.state('tab.assignCall', {
url: '/assignCall',
cache: false,
views: {
'tab-userActivity': {
templateUrl: 'View/AssignCallView.html',
controller: 'AssignCallCtrl'
}
}
})

.state('tab.scheduleCall', {
url: '/scheduleCall',
cache: false,
views: {
'tab-userActivity': {
templateUrl: 'View/ScheduleCallView.html',
controller: 'ScheduleCallCtrl'
}
}
})

.state('tab.responseCall', {
url: '/responseCall',
cache: false,
views: {
'tab-userActivity': {
templateUrl: 'View/ResponseCallView.html',
controller: 'ResponseCallCtrl'
}
}
})

.state('tab.closeCall', {
url: '/closeCall',
cache: false,
views: {
'tab-userActivity': {
templateUrl: 'View/CloseCallView.html',
controller: 'CloseCallCtrl'
}
}
})

.state('tab.feedbackCall', {
url: '/feedbackCall',
cache: false,
views: {
'tab-userActivity': {
templateUrl: 'View/FeedbackView.html',
controller: 'FeedbackCtrl'
}
}
})

.state('tab.installationCall', {
url: '/installationCall',
cache: false,
views: {
'tab-userActivity': {
templateUrl: 'View/InstallationView.html',
controller: 'InstallationCtrl'
}
}
})

.state('tab.correctiveMaintenanceCall', {
url: '/correctiveMaintenanceCall',
cache: false,
views: {
'tab-userActivity': {
templateUrl: 'View/CorrectiveMaintenanceView.html',
controller: 'CorrectiveMaintenanceCtrl'
}
}
})

.state('tab.preventiveMaintenanceCall', {
url: '/preventiveMaintenanceCall',
cache: false,
views: {
'tab-userActivity': {
templateUrl: 'View/PreventiveMaintenanceView.html',
controller: 'PreventiveMaintenanceCtrl'
}
}
})

.state('tab.calibrationCall', {
url: '/calibrationCall',
cache: false,
views: {
'tab-userActivity': {
templateUrl: 'View/CalibrationView.html',
controller: 'CalibrationCtrl'
}
}
})


.state('tab.overallCallsCtrl', {
url: '/overallCallsCtrl',
cache: false,
views: {
'tab-overallCallsCtrl': {
templateUrl: 'View/OverallCallsView.html',
controller: 'OverallCallsCtrl'
}
}
})

.state('tab.dashboard', {
url: '/dashboard',
cache: false,
views: {
'tab-dashboard': {
templateUrl: 'View/DashboardView.html',
controller: 'DashboardCtrl'
}
}
});

// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/userSignIn');



});

然后，如果我从C导航ViewA，如下图所示，幻灯片菜单切换按钮被禁用。

控制器处理：

ActivityController.js //在此页面中切换在模拟器中可见

$state.go('tab.scheduledInsideTabCalls');

在ActivityController Html和Signin Html页面中我设置hide-back-button =“true”，而不是我设置的所有HTML页面hide-back-button =“false”

在此页面中的AssignCallController.js //在模拟器中可见的后退按钮

$state.go('tab.userActivity');

达到userActivity后，页面切换被禁用。

Answer 1

您似乎在离子导航视图中使用此代码。你应该把这个观点作为基础。然后在此代码中使用<ion-nav-view></ion-nav-view>扩展它们。例子

<ion-side-menus enable-menu-with-back-views="true">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>
      <ion-nav-buttons side="right">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="right">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-tabs class="tabs-icon-top tabs-color-active-positive">
      <!-- Store Tab -->
      <ion-tab title="Winkels" icon-off="ion-home" icon-on="ion-home" ui-sref="menu.shop">
        <ion-nav-view name="tab-shop"></ion-nav-view>
      </ion-tab>

      <!-- Cart Tab -->
      <ion-tab title="Winkelwagen" icon-off="ion-bag" icon-on="ion-bag" ui-sref="menu.cart">
        <ion-nav-view name="tab-cart"></ion-nav-view>
      </ion-tab>

      <!-- Contact Tab -->
      <ion-tab title="Contact" icon-off="ion-email" icon-on="ion-email" ui-sref="menu.contact">
        <ion-nav-view name="tab-contact"></ion-nav-view>
      </ion-tab>


    </ion-tabs>
  </ion-side-menu-content>
  <ion-side-menu side="right">
    <ion-header-bar class="bar-stable">
      <h1 class="title">Menu</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item menu-close ng-click="login()">
          Login
        </ion-item>
        <ion-item menu-close href="#/app/search">
          Search
        </ion-item>
        <ion-item menu-close href="#/app/browse">
          Browse
        </ion-item>
        <ion-item menu-close href="#/app/playlists">
          Playlists
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

路线：

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'ngCordova'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider) {

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
  $stateProvider

  // setup an abstract state for the tabs directive
  .state('menu', {
    url: '/menu',
    abstract: true,
    templateUrl: 'templates/menu.html'
  })

  // Each tab has its own nav history stack:

  .state('menu.shop', {
    cache: false,
    url: '/shop',
    views: {
      'tab-shop': {
        templateUrl: 'templates/tab-shop.html',
        controller: 'ShopCtrl'
      }
    }
  })

  .state('menu.cart', {
    cache: false,
    url: '/cart',
    views: {
      'tab-cart': {
        templateUrl: 'templates/tab-cart.html',
        controller: 'CartCtrl'
      }
    }
  })

  .state('menu.contact', {
    url: '/contact',
    views: {
      'tab-contact': {
        templateUrl: 'templates/tab-contact.html',
        controller: 'ContactCtrl'
      }
    }
  })

  .state('menu.store', {
    cache: false,
    url: '/store/{storeId}',
    views: {
      'tab-shop': {
        templateUrl: 'templates/storeView.html',
        controller: 'StoreViewCtrl',
      }
    }
  })
  .state('menu.category', {
    cache: false,
    url: '/category/{categoryId}',
    views: {
      'tab-shop': {
        templateUrl: 'templates/categoryView.html',
        controller: 'CategoryViewCtrl',
      }
    }
  })
  .state('menu.product', {
    cache: false,
    url: '/product/{productId}',
    views: {
      'tab-shop': {
        templateUrl: 'templates/productView.html',
        controller: 'ProductViewCtrl',
      }
    }
  }).state('menu.checkout', {
    cache: false,
    url: '/checkout}',
    views: {
      'tab-cart': {
        templateUrl: 'templates/checkoutView.html',
        controller: 'CheckoutCtrl',
      }
    }
  });

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/menu/shop');

});

查看菜单路径的抽象状态。这可确保在此基本视图中加载其余视图。

Answer 2

隐藏在儿童视图上的按钮默认情况下，菜单切换按钮仅显示在根级别菜单页面上。导航到子视图将隐藏菜单切换按钮。通过将ionSideMenus指令的enable-menu-with-back-views属性设置为true，可以在子页面上显示它们。

尝试更改“＆amp; lt ion-side-menus enable-menu-with-back-views =”false“＆amp; gt”to“＆amp; lt ion-side-menus enable-menu-with-back-views =“true”＆amp; gt“

ionic：启用带有后视图问题的菜单

2 个答案: