Question

你好我每个人都使用离子来构建我的应用程序，我把幻灯片菜单问题是当我使用“stage.go”更改视图这项工作，但幻灯片菜单失败。那么我怎么能解决这个问题呢？

路由器：

"use strict";

var app=angular.module('monApplication', ['ionic']);

app.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.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
});

app.config(function($stateProvider, $urlRouterProvider) {
  var cheminMenu="HorsConnexion/"

  $stateProvider

  .state('app', {
    url: "/app",
    abstract: true,
    templateUrl: "templates/HorsConnexion/menu.html",
  })

  .state('app.Aide', {
    url: "/Aide",
    views: {
      'menuContent': {
        templateUrl: "templates/Commun/Aide.html"
      }
    }
  })

  .state('app.Apropos', {
    url: "/Apropos",
    views: {
      'menuContent': {
        templateUrl: "templates/Commun/Apropos.html"
      }
    }
  })
    .state('app.Connexion', {
      url: "/Connexion",
      views: {
        'menuContent': {
          templateUrl: "templates/HorsConnexion/Connexion.html",
          controller: 'connexionCtrl'
        }
      }
    })

  .state('app.inscription', {
    url: "/inscription",
    views: {
      'menuContent': {
        templateUrl: "templates/HorsConnexion/inscription.html",
        controller: 'inscriptionCtrl'
      }
    }
  });
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/Aide');

});

菜单：

<ion-side-menus>
  <ion-side-menu-content>
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </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>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-header-bar class="bar-stable">
      <h1 class="title">Left</h1>
    </ion-header-bar>
    <ion-content>
      <ion-item nav-clear menu-close ui-sref="app.Connexion">
          Connexion
        </ion-item>
      <ion-list>
        <ion-item nav-clear menu-close ui-sref="app.Aide">
          Aide
        </ion-item>
      <ion-item nav-clear menu-close ui-sref="app.Apropos">
          A propos
      </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

连接控制器：

"use strict";


app.controller('connexionCtrl', function($state,$scope,$location, $ionicModal, $timeout, $http,connexionService){

    $scope.connexionData = {};  

   $scope.inscription = function() {
    $state.go('app.Aide');
  };

});

Page connexion：

<ion-view view-title="Connexion">
  <ion-content>
  <div class="list">
    <form ng-submit="Connexion()" role="form" name="form1">      
        <label class="item item-input">
          <span class="input-label">Adresse mail</span>
          <input type="text" ng-model="connexionData.Mail" required>
        </label>
        <label class="item item-input">
          <span class="input-label">Mot de passe</span>
          <input type="password" ng-model="connexionData.password" required>
        </label>
        <label class="item">
          <button class="button button-block button-positive" type="submit" ng-disabled="form1.$invalid">Se connecter</button>
          </label>
      </form>
        <label class="item">
           <button class="button button-block button-positive"  ng-click="inscription()">Inscription</button>
        </label>     
    </div>
  </ion-content>
</ion-view>

Answer 1

您必须在enable-menu-with-back-views="true"指令上使用<ion-side-menus>选项，因为它指定ionic docs

您可以通过一个有效的示例来查看this plunkr。

离子滑动菜单在我的控制器中使用state.go时不会出现

1 个答案: