Question

我正在使用Ionic＆amp; AngularJS。我有四页：

登录：没有页眉和页脚。

home：页眉和页脚，但没有sidemenu。

page1和page2：with header，footer and sidemenu。

登录，page1和page2工作正常。问题在于主页。如何在主页中获得所需的功能？

我尝试制作一个代码集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;
});

由于

Answer 1

实际上非常简单，我不会写你所有的代码但是会为你提供伪代码来开始。

在状态中使用“。”时，您将从父级继承。在您的情况下，您继承自menu.html，其中包含导航栏和 sidemenu ，并且您将部分视图插入 viewname：menucontent 的menu.html。这就是为什么您插入 menucontent 的每个视图都会包含navigation bar和sidemenu。

解决方案：

创建另一个父级，它将具有用于登录的页眉和页脚。通过以下内容，您可以拥有自己的父登录。之后，您可以使用$ state.go（'app'）为mainmenu导航到其他页面。

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

嗯，这是多么简单。我希望你能做出一些东西这个答案。

离子angularjs app sidemenu禁用某些页面

1 个答案: