当我在我的控制器state.go使用离子滑动菜单不会出现 [英] ionic slide menu don't appear when i use state.go in my controller

问题描述

您好每一个我正在使用的离子来构建我的应用程序和我把滑动菜单的问题是，当我使用更改视图stage.go这部作品，但滑动菜单失败。所以我怎么可以说FIXE ??

路由器：

 使用严格的;VAR应用= angular.module（'monApplication'，['离子']）;app.run（函数（$ ionicPlatform）{
  $ ionicPlatform.ready（函数（）{
    //默认隐藏附件栏（删除此显示键盘上方的附件栏
    //表单输入）
    如果（window.cordova＆安培;＆安培; window.cordova.plugins.Keyboard）{
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar（真）;
    }
    如果（window.StatusBar）{
      // org.apache.cordova.statusbar要求
      StatusBar.styleDefault（）;
    }
  }）;
}）;的app.config（函数（$ stateProvider，$ urlRouterProvider）{
  VAR cheminMenu =HorsConnexion /  $ stateProvider  .STATE（'应用'，{
    网址：/应用程序
    摘要：真实，
    templateUrl：模板/ HorsConnexion / menu.html
  }）  .STATE（'app.Aide'，{
    网址：/助手，
    观点：{
      menuContent：{
        templateUrl：模板/通信/ Aide.html
      }
    }
  }）  .STATE（'app.Apropos'，{
    网址：/中肯，
    观点：{
      menuContent：{
        templateUrl：模板/通信/ Apropos.html
      }
    }
  }）
    .STATE（'app.Connexion'，{
      网址：/联接
      观点：{
        menuContent：{
          templateUrl：模板/ HorsConnexion / Connexion.html
          控制器：'connexionCtrl
        }
      }
    }）  .STATE（'app.inscription'，{
    网址：/题词
    观点：{
      menuContent：{
        templateUrl：模板/ HorsConnexion / inscription.html
        控制器：'inscriptionCtrl
      }
    }
  }）;
  //如果没有上述状态相匹配，以此作为后备
  $ urlRouterProvider.otherwise（'/应用程序/助手'）;}）;
 

菜单：

 ＆LT;离子侧菜单＆GT;
  ＆LT;离子侧面菜单内容＆GT;
    ＆LT;离子导航栏类=扎稳＆GT;
      ＆LT;离子NAV-后退按钮＆GT;
      ＆LT; /离子NAV-后退按钮＆GT;      ＆LT;离子NAV-按键侧=左＆GT;
        ＆LT;按钮类=按钮，按钮图标按钮清晰离子navicon菜单切换=左＆GT;
        ＆LT; /按钮＆GT;
      ＆LT; /离子NAV-按钮＆GT;
    ＆LT; /离子导航栏＆GT;
    ＆LT;离子导航视图名称=menuContent＆GT;＆LT; /离子NAV-视图＆gt;
  ＆LT; /离子侧面菜单内容＆GT;  ＆LT;离子侧面菜单侧=左＆GT;
    ＆LT;离子标题栏类=扎稳＆GT;
      ＆LT; H1类=标题＆GT;左，LT; / H1＆GT;
    ＆LT; /离子头吧＆GT;
    ＆LT;离子含量＆GT;
      ＆LT;离子项目导航清晰的菜单UI接近，SREF =app.Connexion＆GT;
          联接
        ＆LT; /离子项目＆GT;
      ＆LT;离子列表＆gt;
        ＆LT;离子项目导航清晰的菜单UI接近，SREF =app.Aide＆GT;
          助手
        ＆LT; /离子项目＆GT;
      ＆LT;离子项目导航清晰的菜单UI接近，SREF =app.Apropos＆GT;
          àpropos
      ＆LT; /离子项目＆GT;
      ＆LT; /离子列表＆gt;
    ＆LT; /离子含量＆GT;
  ＆所述; /离子侧菜单＆gt;
＆LT; /离子侧菜单＆GT;
 

控制器为接驳：

 使用严格的;
app.controller（'connexionCtrl'，函数（$状态，$范围，$位置$ ionicModal，$超时，$ HTTP，connexionService）{    $ scope.connexionData = {};   $ scope.inscription =功能（）{
    $ state.go（'app.Aide'）;
  };}）;
 

页的Connexion：

 ＆LT;离子查看查看标题=联接＆GT;
  ＆LT;离子含量＆GT;
  ＆LT; D​​IV CLASS =清单＆GT;
    ＆LT;形式NG提交=联接（）角色=形式NAME =form1的＆GT;
        ＆LT;标签类=逐项输入＆GT;
          ＆LT;跨度类=输入标签＆GT;住址邮件和LT; / SPAN＆GT;
          ＆LT;输入类型=文本NG模型=connexionData.Mail要求＆GT;
        ＆LT; /标签＆gt;
        ＆LT;标签类=逐项输入＆GT;
          ＆LT;跨度类=输入标签＆GT;电机德过时＆LT; / SPAN＆GT;
          ＆LT;输入类型=密码NG模型=connexionData.password要求＆GT;
        ＆LT; /标签＆gt;
        ＆LT;标签类=项＆GT;
          ＆LT;按钮类=按钮按钮按钮块阳性类型=提交NG-禁用=form1的$无效的。＆GT;硒连接器＆LT; /按钮＆GT;
          ＆LT; /标签＆gt;
      ＆LT; /表及GT;
        ＆LT;标签类=项＆GT;
           ＆LT;按钮类=按钮按钮按钮块阳性NG点击=申遗（）＆GT;铭文LT; /按钮＆GT;
        ＆LT; /标签＆gt;
    ＆LT; / DIV＆GT;
  ＆LT; /离子含量＆GT;
＆LT; /离子视图＆gt;
 

解决方案

您必须使用选项启用菜单与 - 背意见=真正的上你的＆LT;离子侧菜单＆GT; 指令，因为它指定的离子文档

您可以看到这plunkr 用工作示例。

hello every one i'm using ionic to build my application and i put slide menu the problem is when i change the view using "stage.go"this work but the slide menu fail. so how i can fixe that ??

the Router :

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

});

the menu :

<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>

the controller for connexion :

"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>

解决方案

You have to use the option enable-menu-with-back-views="true" on your <ion-side-menus> directive, as it specifies ionic docs

You can see this plunkr with a working example.

这篇关于当我在我的控制器state.go使用离子滑动菜单不会出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！