CODEWITHSUNDEEP
angularjsmeteorionic-framework
Nate
Nate

Reputation: 1875

Ionic Side Bar Menu in Meteor

I am trying to implement a ionic side bar menu in my meteor app. I know there is an example here, but I am trying to recreate it on my own. My code is as follows:

app.js: 

if (Meteor.isClient) {

    var app = angular.module('todo', ['angular-meteor', 'ionic'], function($interpolateProvider) {
       $interpolateProvider.startSymbol('[[');
       $interpolateProvider.endSymbol(']]');
    });


    app.controller("TodoCtrl", ['$scope', '$collection', '$ionicSideMenuDelegate', function ($scope,     $collection, $ionicSideMenuDelegate) {

       $scope.toggleProjects = function () {
          $ionicSideMenuDelegate.toggleLeft();
       };
    }]);

}

index.html:

  <body>
      <div>

        <ion-side-menus>
          <!-- Center content -->
          <ion-side-menu-content>
              <ion-header-bar class="bar-dark">
                <h1 class="title">Todo</h1>
              </ion-header-bar>
              <ion-content>
              </ion-content>
           </ion-side-menu-content>

           <!-- Left menu -->
           <ion-side-menu side="left">
              <ion-header-bar class="bar-dark">
                <h1 class="title">Projects</h1>
              </ion-header-bar>
           </ion-side-menu>

        </ion-side-menus>
    </div>
</body>

The output of the code is this: enter image description here

I am running Meteor 1.0.2.1 and my packages are: enter image description here

What am I doing wrong? Thanks.

Upvotes: 1

Views: 956

Answers (2)

Kazim BALOGLU
Kazim BALOGLU

Reputation: 1

This works even with the latest version 1.1. Only urigo:ionic and urigo:angular need to be added with meteor add.

rest is as you do...

Change

Packages to :

meteor-platform
urigo:ionic
urigo:angular

and app bootstrap to :

    Meteor.startup(function ()
    {
      angular.bootstrap(document, ['starter']);
    });

angular.module('starter', ['angular-meteor','ionic'])

.run(['$ionicPlatform',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();
    }
  });
}])

Upvotes: 0

Urigo
Urigo

Reputation: 3185

We answered this problem here:

https://github.com/Urigo/meteor-ionic/issues/34

Upvotes: 1

Related Questions