SlideMenu doesn't work

ionic-v1
1

Hi there, I am new to ionic / agnular js in general so I apologize in advance if the question is silly.

So I can’t get my slide menu to appear. I tried to follow the first tutorial from Chapter 3 but it didn’t get anywhere.

index.html

<body ng-app="app">
    <div ui-view></div>	
</body>

app.js

angular
	.module('app', [
		'ui.router',
		'ionic'
	])
	.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider,$stateProvider) {
		
		$stateProvider
			.state('home', {
				url: '/',
				templateUrl: 'templates/home.html',
				controller: function($scope) {
				
				$scope.pageTitle = "Home"

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

home.html

<ion-side-menus>
    <ion-pane ion-side-menu-content>
        <header class="bar bar-header bar-dark">
            <button class="button button-icon" ng-click="toggleProjects()">
                <i class="icon ion-navicon"></i>
            </button>

            <h1 class="title">{{pageTitle}}</h1>
        </header>
        <ion-content has-header="true">
            Hello World
        </ion-content>
    </ion-pane>

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

</ion-side-menus>

What am I missing? Please help!

2

what are you seeing? are you able to open the side menu by performing a swipe?

3

Nothing really happens, no erors, nothing.

Well I tried to “swipe” the button with mouse but it doesn’t respond.

Also checked firebug:

tapElement BUTTON button button-icon
tapPolyfill isRecentTap BUTTON
preventGhostClick isRecentTap BUTTON

p.s. forgot to mention I only include ionic.bundle.js and ionic.css

4

I have also been having this problem, but I can swipe to reveal the menu.

5

I updated the side menu codepen with a button in the header:
http://codepen.io/ionic/pen/EtbrF

However, I’m not in love with how it’s setup. @max, @andytjoslin and I will talk it over and come up with a better API for this.

1 Like
6

I’m having a similar problem in the ToDo tutorial–i.e. I’m unable to reveal content or menus by swiping. The only thing that shows is “Projects.”

A few related notes:

  • I’m developing on a Linux machine, using Chrome. I thought for awhile that might be the issue, but your supplied codepen sample works fine.
  • I get a similar result on the Android emulator–just Projects is visible.

Awesome, awesome project though! Really excited about it!

7

In my case I was developing an app in firefox and it simply didn’t work in it, but I just checked chrome and it works just fine.

8

In our nightly build we’ve made some changes so non-webkit browsers will work:

Please give that a shot and let us know how it goes, thanks.

9

Thank you sir!

But how do you exactly update the package? Should I run something like

npm update ionic
10

Right now the easiest way is to manually copy it from the nightly build:
http://code.ionicframework.com/#nightly

11

Ok seems like everything is working fine in FF as well!
p.s. Just noticed that the modal window component doesn’t have its animation in FF. It just pops up out of nowhere.

12

Thanks for reporting that, I created an issue for it: https://github.com/driftyco/ionic/issues/671