Question

我正在开发我的第一个离子/ angularjs应用程序，并遇到了障碍。我可以通过选项卡式导航和侧面菜单来加载页面，但侧面菜单中的内容不会出于某种原因显示。它在页面中，我可以在视图源中看到它，但无论我尝试哪种操作样式，它都不会显示。对此我不知所措，我现在无所适从。以下是代码。

的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's 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);
    });
  });
 }
}
});

Answer 1

Side Menus不应该在您的ionNavBar容器中。我在这里有一个示例，展示如何一起使用SideMenu，Tabs和Navigation元素。你关闭了，当它们放在错误的地方时，它的某些东西确实不能正常工作。

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

<强>标记

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

离子侧菜单不显示内容

1 个答案: