我正在研究我的第一个离子/ 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);
});
});
}
}
});
1 回答
Side Menus不应该在您的ionNavBar容器中 . 我在这里有一个例子，展示如何一起使用SideMenu，Tabs和Navigation元素 . 你很亲密，当它们放在错误的地方时，它只是有些东西不能很好地工作 .
http://codepen.io/gnomeontherun/pen/EfKgJ
Markup
JavaScript