Clever Geek Handbook

Ionic sidebar does not display content

I am working on my first ionic / angular app and fell into a trap. I can load the page the way I want with the tabbed navigation and sidebar, but the content in the sidebar isn't showing for some reason. It's on the page, I can see it in the original source, but it won't show what manipulation I'm trying to style. Being new to this, I'm at a loss as to what to do now. Below is the code.

Index.html

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>

<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="js/user-object.js"></script>
<script src="js/news-feed-object.js"></script>
<!-- your app js -->
<script src="js/app.js"></script>
<!-- your controllers js -->
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="wgn">
<ion-nav-bar class="bar-energized nav-title-slide-ios7 ">
    <div ng-controller="MenuCtrl">
    <ion-side-menus>
        <fade-bar></fade-bar>
        <ion-pane ion-side-menu-content>
            <header class="bar bar-header bar-energized nav-title-slide-ios7">
                <button class="button button-icon" ng-click="openLeft()"><i class="icon ion-navicon"></i>
                </button>
                <h1 class="title">Test App</h1>
            </header>
            <ion-content has-header="true" padding="true">
                <!-- Center content -->
            </ion-content>
        </ion-pane>
        <ion-side-menu side="left">
            <header class="bar bar-header bar-dark" fade-header>
                <h1>Left</h1>
            </header>
            <ion-content has-header="true">
                <div>Content</div>
                <div>Content</div>
                <div>Content</div>
                <div>Content</div>
                <div>Content</div>
                <div>Content</div>
                <div>Content</div>
                <div>Content</div>
            </ion-content>
        </ion-side-menu>
    </ion-side-menus>
</div>
    <ion-nav-back-button class="button-icon ion-arrow-left-c ">
    </ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view animation="slide-left-t">
</ion-nav-view>
</body>

</html>

tabs.html

<ion-tabs class="tabs-icon-top tabs-energized">
<ion-tab title="Home" icon="ion-home" href="#/tab/events">
    <ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>

<ion-tab title="About" icon="ion-ios7-information" href="#/tab/about">
    <ion-nav-view name="about-tab"></ion-nav-view>
</ion-tab>

<ion-tab title="Sign-Out" icon="ion-log-out" href="#/sign-in">
</ion-tab>

</ion-tabs>

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 <body> 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: '<div class="fade-bar"></div>',
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);
    });
  });
 }
}
});
+3


source to share


1 answer


Sidebars do not need to be in the ionNavBar container. I have an example showing how to use the SideMenu, Tabs and Navigation elements together. You are close, its some things don't work very well when placed in the wrong place.

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

Markup



 <ion-side-menus>
  <ion-pane ion-side-menu-content>
    <ion-nav-bar class="bar-positive nav-title-slide-ios7">
      <ion-nav-back-button class="button-icon"><span class="icon ion-ios7-arrow-left"></span></ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view></ion-nav-view>
  </ion-pane>

  <ion-side-menu side="left">
    <ion-header-bar class="bar bar-header bar-dark"></ion-header-bar>
    <ion-content has-header="true">
      <ion-list>
        <ion-item href="#/" ng-click="sideMenuController.toggleLeft()">Home</ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>

  <ion-side-menu side="right" >
    <ion-header-bar class="bar bar-header bar-dark" title="Search"></ion-header-bar>
    <ion-content has-header="true">

    </ion-content>
  </ion-side-menu>
</ion-side-menus>

<script id="home.html" type="text/ng-template">
  <ion-view title="Home">
    <ion-nav-buttons side="right">
      <button class="button button-icon button-clear ion-plus" ng-click="openModal()"></button>
    </ion-nav-buttons>
    <ion-nav-buttons side="left">
      <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
    </ion-nav-buttons>        
      <ion-tabs class="tabs-positive">
        <ion-tab title="Stooges">
          <h4>The Stooges</h4>
      <ion-list>
        <ion-item ng-repeat="stooge in stooges" href="#/{{stooge.name}}">{{stooge.name}}</ion-item>
      </ion-list>
          </ion-tab>
        <ion-tab title="Tab 2">
          <h2>Just another tab, for another reason</h2>
          </ion-tab>
        </ion-tabs>
  </ion-view>
</script>

<script id="modal.html" type="text/ng-template">
  <div class="modal">
    <ion-header-bar class="bar bar-header bar-positive">
      <h1 class="title">New Stooge</h1>
      <button class="button button-clear button-primary" ng-click="modal.hide()">Cancel</button>
    </ion-header-bar>
    <ion-content>
      <div class="padding">
        <div class="list">
          <label class="item item-input">
            <span class="input-label">Name</span>
            <input ng-model="form.name" type="text" name="name" />
          </label>
          <button class="button button-full button-positive" ng-click="addStooge()">Create</button>
        </div>
      </div>
    </ion-content>
  </div>
</script>

<script id="item.html" type="text/ng-template">
  <ion-view title="{{item}}">
    <ion-content>
      <h1>{{item}}</h1>
    </ion-content>
  </ion-view>
</script>

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;
});
+3


source






More articles:


All Articles