Ionic Side Menu Not Showing Content

Question

I am working on my first ionic/angularjs app and have hit a snag. I can get the page to load like I want with a tabbed navigation and side menu but the content in the side menu won't show for some reason. It is in the page, I can see it in view source but it will not show no matter what manipulation I try to the styling. Being new to this I am at a loss for what to do now. Below is the code.

Index.html

tabs.html

app.js

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a  attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('wgn', ['ionic', 'wgn.controllers', 'wgn.services'])
.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) {
            StatusBar.styleDefault();
        }

    });
})
.config(function ($stateProvider, $urlRouterProvider) {

    $stateProvider.state('signin', {
        url: "/sign-in",
        templateUrl: "templates/sign-in.html",
        controller: 'SignInCtrl'
    }).state('forgotpassword', {
        url: "/forgot-password",
        templateUrl: "templates/forgot-password.html"
    }).state('slidemenu', {
        url: "/slide-menu.html",
        abstract: true,
        templateUrl: 'templates/slide-menu.html'
    }).state('tabs', {
        url: "/tab",
        abstract: true,
        templateUrl: "templates/tabs.html"
    }).state('tabs.home', {
        url: "/home",
        views: {
            'home-tab': {
                templateUrl: "templates/home.html",
                controller: 'HomeTabCtrl'
            }
        }
    }).state('tabs.eventdetails', {
        url: "/eventdetails/:eventid",
        views: {
            'home-tab': {
                templateUrl: "templates/event-details.html",
                controller: 'EventDetailsCtrl'
            }
        }
    }).state('tabs.addevents', {
        url: "/addevents",
        views: {
            'home-tab': {
                templateUrl: "templates/addevents.html"
            }
        }
    }).state('tabs.about', {
        url: "/about",
        views: {
            'about-tab': {
                templateUrl: "templates/about.html"
            }
        }
    }).state('tabs.navstack', {
        url: "/navstack",
        views: {
            'about-tab': {
                templateUrl: "templates/nav-stack.html"
            }
        }
    }).state('tabs.contact', {
        url: "/contact",
        views: {
            'contact-tab': {
                templateUrl: "templates/contact.html"
            }
        }
    });


    $urlRouterProvider.otherwise("/sign-in");

  });

controller.js

angular.module('wgn.controllers', [])
.controller('SignInCtrl', function ($scope, $state) {
    $scope.signIn = function (user) {
        console.log('Sign-In', user);
        $state.go('tabs.home');
    };
}).controller('HomeTabCtrl', function ($scope, WGNEvents, $ionicModal) {
    console.log('HomeTabCtrl');
    $scope.wgnEvents = WGNEvents.all();
    $scope.user = userObject;
    $scope.newsFeedList = newsFeedObjectList;

    //Add Event 
    $ionicModal.fromTemplateUrl('templates/addevents.html', {
        scope: $scope,
        animation: 'slide-in-up'
    }).then(function (modal) {
        $scope.modal = modal;
    });
    $scope.addEvent = function () {
        $scope.modal.show();
        console.log('show modal');
    };
    $scope.closeModal = function () {
        $scope.modal.hide();
    };
    //Cleanup the modal when we're done with it!
    $scope.$on('$destroy', function () {
        $scope.modal.remove();
    });
    // Execute action on hide modal
    $scope.$on('modal.hidden', function () {
        // Execute action
    });
    // Execute action on remove modal
    $scope.$on('modal.removed', function () {
        // Execute action
    });

  }).controller('EventDetailsCtrl', function ($scope, WGNEvents, $stateParams) {
    console.log('EventDetailsCtrl');
    var eventID = $stateParams.eventid;
    console.log('event-id: ' + eventID);
    $scope.wgnEvents = WGNEvents.get(eventID);

    console.log($scope.wgnEvents);
}).controller('HomePageCtrl', function ($scope, WGNEvents, $ionicModal) {
    console.log('HomePageCtrl');
    $scope.getClass = function (score, par) {
        return {
            'below-par': (par - score) > 0,
            'above-par': (par - score) < 0,
            'text-dark': (par - score) == 0
        };
    }
    $scope.getOverUnder = function (score, par) {
        var total = score - par;
        if (total === 0) {
            total = 'E';
        } else if (total > 0) {
            total = '+' + total;
        }
        return total;
    }
}).controller('MenuCtrl', function($scope) {
// Our controller
})

// The fadeBar directive
.directive('fadeBar', function($timeout) {
return {
restrict: 'E',
template: '',
replace: true,
link: function($scope, $element, $attr) {
  // Run in the next scope digest
  $timeout(function() {
    // Watch for changes to the openRatio which is a value between 0 and 1 that says how "open" the side menu is
    $scope.$watch('sideMenuController.getOpenRatio()', function(ratio) {
      // Set the transparency of the fade bar
      $element[0].style.opacity = Math.abs(ratio);
    });
  });
 }
}
});

Jeremy Wilken · Accepted Answer

Side Menus should not be in your ionNavBar container. I've got an example here showing how to use SideMenu, Tabs, and Navigation elements together. You're close, its just some things don't really work well when they are placed in the wrong place.

http://codepen.io/gnomeontherun/pen/EfKgJ

Markup

JavaScript

angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('home', {
      url: '/',
      controller: 'HomeCtrl',
      templateUrl: 'home.html'
    })
    .state('item', {
      url: '/:item',
      controller: 'ItemCtrl',
      templateUrl: 'item.html'
    });

  $urlRouterProvider.otherwise('/');
})
.controller('HomeCtrl', function($scope, $ionicSideMenuDelegate, $ionicModal) {
  $scope.stooges = [{name: 'Moe'}, {name: 'Larry'}, {name: 'Curly'}];

  $ionicModal.fromTemplateUrl('modal.html', {
    animation: 'slide-in-up',
    scope: $scope
  }).then(function (modal) {
    $scope.modal = modal;
  });

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

  $scope.openModal = function () {
    $scope.modal.show();
  }

  $scope.form = {};

  $scope.addStooge = function () {
    console.log($scope);
    $scope.stooges.push({name: $scope.form.name});
    $scope.modal.hide();
  };

  $scope.$on('$destroy', function() {
        $scope.modal.remove();
  });

})
.controller('ItemCtrl', function ($scope, $stateParams) {
  $scope.item = $stateParams.item;
});

Ionic Side Menu Not Showing Content

Answers (1)

Related Questions