[英]Ionic Side Menu Not Showing Content
我正在研究我的第一個離子/ 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);
});
});
}
}
});
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;
});
離子性側面菜單和帶有嵌套視圖的選項卡：選項卡嵌套視圖的內容未顯示
[英]Ionic side menu and tabs with nested views: content of tab nested views not showing
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.