Javascript 离子侧菜单不显示_Javascript_Angularjs_Ionic Framework

Javascript 离子侧菜单不显示

javascript angularjs ionic-framework

Javascript 离子侧菜单不显示,javascript,angularjs,ionic-framework,Javascript,Angularjs,Ionic Framework,所以我正试图使用ionic来构建一个简单的移动应用程序。我看过爱奥尼亚的教程，在谷歌上搜索了不少，但我还不太明白。通过将以下代码添加到index.html页面，我创建了一个导航栏，显示在每个页面上： <body ng-app="starter"> <ion-nav-bar class="bar-stable nav-title-slide-ios7"> <ion-nav-back-button class="button-icon icon

所以我正试图使用ionic来构建一个简单的移动应用程序。我看过爱奥尼亚的教程，在谷歌上搜索了不少，但我还不太明白。通过将以下代码添加到index.html页面，我创建了一个导航栏，显示在每个页面上：

   <body ng-app="starter">
   <ion-nav-bar class="bar-stable nav-title-slide-ios7">
      <ion-nav-back-button class="button-icon icon  ion-ios7-arrow-back">
      </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view>
    </ion-nav-view>
  </body>

和一个空的NavCtrl到my controllers.js文件：

.controller('NavCtrl', function($scope) {
});

我怀疑我的.state代码可能不太正确，但不确定。此外，是否需要向NavCtrl控制器添加一些内容以打开/关闭侧菜单？非常感谢

爱奥尼亚有一款入门应用程序，这是一款带有侧菜单的应用程序的小例子

ionic start myApp sidemenu

这是一个你可以查看的实时预览

我认为你的路线定义有问题

更改此项：

.state('app.sidemenu', { ...

为此：

.state('sidemenu', { ...

所有其他通往菜单不同部分的路线应如下所示：

.state('sidemenu.home', { ...
.state('sidemenu.dashboard', { ...

哇，在浪费了一天的时间在简陋的文档上之后，我终于解决了这个问题。ionic framework网站上的教程和示例似乎已经严重过时

首先，我创建了一个工厂，为侧菜单提供列表项：

 .factory('MenuService', function() {
  var menuItems = [{text: 'Friends'}, {text: 'Enemies'}, {text: 'Losers'}];

  return {
    all: function() {
      return menuItems;
    }
  }
})

然后，我创建了一个菜单控制器：

.controller('MenuController', function ($scope, $location, MenuService) {
  // "MenuService" is a service returning mock data (services.js)
  $scope.list = MenuService.all();
});

我将index.html页面主体中的代码替换为：

    <div ng-controller="MenuController">
      <ion-side-menus>

          <!-- Center content -->
          <ion-pane ion-side-menu-content>
              <ion-nav-bar type="bar-assertive" back-button-type="button-icon" back-button-icon="ion-arrow-left-c"></ion-nav-bar>

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

          <!-- Left Side Menu -->
          <ion-side-menu side="right">
              <ion-header-bar class="bar bar-header bar-assertive">
                  <h1 class="title">Menu</h1>
              </ion-header-bar>
              <ion-content has-header="true">
                  <ion-list>
                      <ion-item ng-click="goTo(item.link)" class="item item-icon-left" ng-repeat="item in list" menu-close>
                          <!-- <i ng-class="item.iconClass"></i> -->
                          {{item.text}}
                      </ion-item>
                  </ion-list>
              </ion-content>
          </ion-side-menu>
      </ion-side-menus>
  </div>


菜单
{{item.text}

工厂取代了我在模板目录中的sidemenus.html。另外，根本不需要“.state”之类的东西。

好吧，我想出来了，但是stackoverflow在明天之前不会让我回答我自己的问题。国家的东西是不必要的。我用一个工厂、一个控制器和index.html文件中的一些标记完成了这一切。明天我会把答案贴出来。长话短说，ionic框架教程和示例没有帮助。。。

 .factory('MenuService', function() {
  var menuItems = [{text: 'Friends'}, {text: 'Enemies'}, {text: 'Losers'}];

  return {
    all: function() {
      return menuItems;
    }
  }
})

.controller('MenuController', function ($scope, $location, MenuService) {
  // "MenuService" is a service returning mock data (services.js)
  $scope.list = MenuService.all();
});

    <div ng-controller="MenuController">
      <ion-side-menus>

          <!-- Center content -->
          <ion-pane ion-side-menu-content>
              <ion-nav-bar type="bar-assertive" back-button-type="button-icon" back-button-icon="ion-arrow-left-c"></ion-nav-bar>

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

          <!-- Left Side Menu -->
          <ion-side-menu side="right">
              <ion-header-bar class="bar bar-header bar-assertive">
                  <h1 class="title">Menu</h1>
              </ion-header-bar>
              <ion-content has-header="true">
                  <ion-list>
                      <ion-item ng-click="goTo(item.link)" class="item item-icon-left" ng-repeat="item in list" menu-close>
                          <!-- <i ng-class="item.iconClass"></i> -->
                          {{item.text}}
                      </ion-item>
                  </ion-list>
              </ion-content>
          </ion-side-menu>
      </ion-side-menus>
  </div>