在某些页面上禁用 ionic angularjs app sidemenu答案

【问题标题】：ionic angularjs app sidemenu disable on some pages在某些页面上禁用 ionic angularjs app sidemenu
【发布时间】：2016-06-11 22:21:39
【问题描述】：

我正在使用Ionic 和AngularJS 构建一个应用程序。我有四页：

登录：没有页眉和页脚。

主页：有页眉和页脚，但没有侧边菜单。

page1 和 page2：带有页眉、页脚和侧边菜单。

我尝试制作一个codepen http://codepen.io/brunocoder/pen/jqOdbj，但它不工作可能是一些设置问题。

这是我的代码：

index.html

<html ng-app="myApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="cordova.js"></script>
    <script src="js/angular-route.js"></script>
    <script src="js/app.js"></script>
  </head>
  <body>
    <ion-nav-view></ion-nav-view>
  </body>
</html>

模板/html：

<ion-nav-view></ion-nav-view>

<script type="text/ng-template" id="menu.html">
<ion-side-menus>
  <ion-side-menu-content>
    <ion-nav-bar class="bar-positive">
      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left" >
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>
  <ion-side-menu side="left"  enable-menu-with-back-views="true">
    <ion-header-bar class="bar-positive">
      <h1 class="title">Left</h1>
    </ion-header-bar>
    <!-- end side menu left header -->
    <ion-content>
      <ion-list>
        <ion-item menu-close ng-repeat="list in pagelist" href="#/app/{{list.url}}">
          {{list.title}}
        </ion-item>
      </ion-list>
    </ion-content>
    <!-- end side menu left content -->
  </ion-side-menu>
</ion-side-menus>
</script>

<script type="text/ng-template" id="login.html">
<ion-view title="Sign-In">
  <ion-content>
    <div class="list">
      <label class="item item-input item-floating-label">
        <span class="input-label">Username</span>
        <input type="text" placeholder="Username">
      </label>
      <label class="item item-input item-floating-label">
        <span class="input-label">Password</span>
        <input type="password" placeholder="Password">
      </label>
    </div>
    <div class="padding">
      <button nav-clear class="button button-block button-positive" ng-click="LogIn(user)">
        click here
      </button>
    </div>
  </ion-content>
</ion-view>
</script>

<script type="text/ng-template" id="home.html">
<ion-view view-title="Home">
  <ion-content ng-controller="HomepageController">
    <ion-list>
      <ion-item menu-close ng-repeat="list in pagelist" href="#/app/{{list.url}}">
        {{list.title}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>
<footer ng-include="'templates/footer.html'"></footer>
</script>

<script type="text/ng-template" id="page1.html">
<ion-view view-title="Page 1">
  <div ng-controller="Page1Controller">
    <ion-content>
      <h2>This is Page 1</h2>
    </ion-cotent>
  </div>
</ion-view>
<footer ng-include="'templates/footer.html'"></footer>
</script>

<script type="text/ng-template" id="page2.html">
<ion-view view-title="Page 2">
  <div ng-controller="Page2Controller">
    <ion-content>
      <h2>This is Page 2</h2>
    </ion-cotent>
  </div>
</ion-view>
<footer ng-include="'templates/footer.html'"></footer>
</script>

<script type=text/ng-template id= footer.html>
<div class="bar bar-footer bar-positive">
  <a class="button icon-left ion-home button-clear" ng-href="#/app/home"></a>
  <a class="button icon-left ion-log-out button-clear" ng-href="#/app/login"></a> 
</div>
</script>

app.js：

angular.module('myApp', ['ionic', 'ngRoute'])
.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
  .state('app', {
    url: "/app",
    abstract: true,
    templateUrl: "templates/menu.html",
    controller: 'AppCtrl'
  })
  .state('app.home', {
    url: "/home",
    views:{
      'menuContent' :{
        templateUrl: "templates/home.html",
        controller: 'HomepageController'
      }
    }
  })
  .state('app.page1',{
    url: "/page1",
    views:{
      'menuContent' :{
        templateUrl: 'templates/page1.html',
        controller: 'Page1Controller'
      }
    }
  })
  .state('app.page2',{
    url: "/page2",
    views:{
      'menuContent' :{
        templateUrl: 'templates/page2.html',
        controller: 'Page2Controller'
      }
    }
  })
  .state('login', {
    url: "/login",
    templateUrl: "templates/login.html",
    controller: 'LoginCtrl'
  })
  $urlRouterProvider.otherwise('/login');
})

.controller('AppCtrl', function($scope, $location, ServicePaglelist) {
  $scope.pagelist = ServicePaglelist;
})
.controller('HomepageController', function($scope, $http, $stateParams, $state, ServicePaglelist, $ionicSideMenuDelegate) {
  $ionicSideMenuDelegate.canDragContent(false);
  $scope.pagelist = ServicePaglelist;
})
.controller('Page1Controller', function($scope) {
})
.controller('Page2Controller', function($scope) {
})
.controller('LoginCtrl', function($scope, $state) {
  $scope.LogIn = function(user) {
    $state.go('app.home');
  };
})
.factory('ServicePaglelist', function(){
  var messages = [
    { title: 'Page 1', id: 1, url: 'page1' },
    { title: 'Page 2', id: 1, url: 'page2' },
  ];
  return messages;
});

谢谢

【问题讨论】：

别忘了勾选正确:) 答案如下。

标签： angularjs routing ionic-framework angular-ui-router

【解决方案1】：

其实很简单，我不会给你写所有的代码，但是会为你提供伪代码让你开始。

当您在状态中使用 "." 时，您是从父级继承的。在您的情况下，您是从具有 导航栏 和 sidemenu 的 menu.html 继承的，并且您将部分视图插入到 viewname:menucontent 的 menu.html。这就是为什么您插入到 menucontent 中的每个视图都会有 navigation bar 和 sidemenu。

解决方案：

创建另一个具有登录页眉和页脚的父级。使用以下内容，您可以拥有自己的父母登录。之后，您可以使用 $state.go('app') 作为主菜单导航到其他页面。

$stateProvider
  .state('login', {
    url: "/login",
    templateUrl: "templates/login.html",
    controller: 'LoginCtrl'
  })
 $stateProvider
  .state('app', {
    url: "/app",
    abstract: true,
    templateUrl: "templates/menu.html",
    controller: 'AppCtrl'
  })

至于您的家，您只需删除侧边菜单即可。并为这 2 页制作附加菜单。或者使用侧菜单创建另一个注入$stateProvider 的父级，并将这些 page1 和 page2 视图插入到该父级中。

如果您对如何制作父视图和插入视图感到困惑。它也很简单。在您的父视图中，您将有以下位置：

<ion-nav-view name="customView"></ion-nav-view>

假设，customView 的父视图是 Dashboard.html。你的部分观点是signup.html。那么，

$stateProvider
  .state('dashboard', {
    url: "/dashboard",
    abstract: true,
    templateUrl: "templates/Dashboard.html",
    controller: 'DashboardCtrl'
  })
 .state('dashboard.signUp',{
    url: "/signUp",
    views:{
      'customView' :{
        templateUrl: 'templates/signup.html',
        controller: 'SignupController'
      }
    }
  })

嗯，就是这么简单。我希望你能做点什么这个答案。

【讨论】：

它工作了 :) 非常感谢你的精彩解释，让我了解它是如何工作的。你拯救了我的一天......