For some reason one of my tabs(the chat tab) doesn't work. All the other tabs work i'm not sure why the chat tab doesn't work. As you can see from my plunker the chats tab is just blank while the other tabs show content. In my actual app the title bar shows but has the text of the previous tab.
So heres my plunker:
http://plnkr.co/edit/k4SknwdMDM2TWJMuRdXj?p=preview
Heres some code:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/1.0.0-beta.11/css/ionic.min.css">
<script src="http://code.ionicframework.com/1.0.0-beta.11/js/ionic.bundle.min.js"></script>
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- Firebase -->
<script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
<!-- AngularFire -->
<script src="https://cdn.firebase.com/libs/angularfire/1.1.3/angularfire.min.js"></script>
<script src="app.js"></script>
<script src="controllers.js"></script>
<script src="services.js"></script>
</head>
<body ng-app="starter">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
</html>
Chat.html
<ion-view view-title="Chats">
<ion-content>
asdsadsa
<ion-list>
<ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" href="#/tab/chats/{{chat.id}}">
<img ng-src="chat.closet">
<h2>{{chat.email}}</h2>
<p>{{chat.heightFt}}</p>
<i class="icon ion-chevron-right icon-accessory"></i>
<ion-option-button class="button-assertive" ng-click="remove(chat)">
Delete
</ion-option-button>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
tabs.html:
<!--
Create tabs with an icon and label, using the tabs-positive style.
Each tab's child <ion-nav-view> directive will have its own
navigation history that also transitions its views in and out.
-->
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<!-- Dashboard Tab -->
<ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/dash">
<ion-nav-view name="tab-dash"></ion-nav-view>
</ion-tab>
<!-- Chats Tab -->
<ion-tab title="Chats" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/tab/chats">
<ion-nav-view name="tab-chats"></ion-nav-view>
</ion-tab>
<!-- Account Tab -->
<ion-tab title="Account" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/account">
<ion-nav-view name="tab-account"></ion-nav-view>
</ion-tab>
<ion-tab title="Settings" hidden="true">
<ion-nav-view name="tab-settings"></ion-nav-view>
</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'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'firebase', 'starter.controllers', 'starter.services'])
.run(function($ionicPlatform, $rootScope, $firebaseObject) {
$rootScope.ref = new Firebase("https://vivid-fire-3325.firebaseio.com");
$rootScope.isLoggedIn = false;
$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 && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'tabs.html'
})
// Each tab has its own nav history stack:
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.chats', {
url: '/chats',
views: {
'tab-chats': {
templateUrl: 'tab-chats.html',
controller: 'ChatsCtrl'
}
}
})
.state('tab.chat-detail', {
url: '/chats/:chatId',
views: {
'tab-chats': {
templateUrl: 'chat-detail.html',
controller: 'ChatDetailCtrl'
}
}
})
.state('tab.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'tab-account.html',
controller: 'AccountCtrl'
}
}
})
.state('tab.settings', {
url: '/settings',
views: {
'tab-settings': {
templateUrl: 'tab-settings.html',
controller: 'SettingsCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/dash');
});
Thanks.
EDIT:
Named the chat file in the plunker incorrectly. Changed the name of Chat.html to Chats.html. It still does not work however, here is the new plunker:
http://plnkr.co/edit/k4SknwdMDM2TWJMuRdXj?p=preview
Your tab activates that means, problem has to do something with your view.
Change tab-chats.html to tab-chat.html
Related
I'm trying to use a modal triggered from the ion-header-bar to overlay on top of a google map. When I click 'login' it slides in a black screen. I've heard of including bootstrap can cause the problem, however I'm not using bootstrap.
My guess is it has something to do with the google map, however I am at a loss as to what. It could also have something to do with ui-href. I'd be happy to hear suggestions.
I realize that the navigating directly to login or signup will crash the app because the map is not loaded, however I doubt this will be an issue because the app will always load into the googlemap first.
app.js :
angular.module('stuffmobile', ['ionic', 'ngCordova'])
.constant('ApiEndpoint', {
url: 'http://localhost:3000/api'
})
.run(function($ionicPlatform, Map) {
$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();
}
Map.init();
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('map', {
url: '/',
templateUrl: 'templates/map.html',
controller: 'MapCtrl',
controllerAs: 'mapctrl'
})
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'LoginCtrl',
controllerAs: 'loginCtrl'
})
.state('signup', {
url: '/signup',
templateUrl: 'templates/signup.html',
controller: 'SignUpCtrl',
controllerAs: 'signUpCtrl'
});
$urlRouterProvider.otherwise("/");
});
index.js
<!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>
<!-- compiled css output -->
<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='lib/ngCordova/dist/ng-cordova.js'></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<!-- controllers -->
<script src="js/controllers/map-controller.js"></script>
<script src="js/controllers/login-controller.js"></script>
<script src="js/controllers/signup-controller.js"></script>
<!-- services -->
<script src="js/services/markers-service.js"></script>
<script src="js/services/map-service.js"></script>
<script src="js/services/local-service.js"></script>
<script src="js/services/user-service.js"></script>
</head>
<body ng-app="stuffmobile">
<ion-pane>
<ion-header-bar class="bar-energized">
<h1 class="title">Stuffmapper</h1>
<div class="buttons">
<button class="button button-clear" ui-sref='login'>Login</button>
<button class="button button-clear" ui-sref='signup'>Sign Up</button>
</div>
</ion-header-bar>
<ion-nav-view></ion-nav-view>
</ion-pane>
<!-- Including google maps-->
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
</body>
</html>
login-controller
angular.module('stuffmobile')
.controller('LoginCtrl', function($scope, $ionicModal, $window, $timeout, UserService){
var login = this;
$ionicModal.fromTemplateUrl('templates/login.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
});
$scope.openModal = function() {
$scope.modal.show();
};
$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
});
});
login.html
<script id="templates/login.html" type="text/ng-template">
<ion-modal-view>
<ion-header-bar>
<h1 class="title">Login</h1>
</ion-header-bar>
<ion-content>
Hello!
</ion-content>
</ion-modal-view>
</script>
Usually the problem is a "conflict" between css.
On my project the problem was the bootstrap's css. To solve i getted a css customized with getbootstrap removing on the css configuration the modal part.
To be precisly the .modal class in bootstrap.css set display: hidden;
On your code i don't see any css inclusion. Only the ionic once. But there is a difference between the ionic js path and the css path.
The first is css/
<link href="css/ionic.app.css" rel="stylesheet">
And the second lib/ionic/js/:
<script src="lib/ionic/js/ionic.bundle.js"></script>
Maybe you need to add lib/ionic/ to the first path:
<link href="lib/ionic/css/ionic.app.css" rel="stylesheet">
I want to make an app with ionic which has three different main layouts.
with no header just an bg-image and a input field
header with one button and a list
heade with two buttons and than four tabs
how do I habe to structer the layouts? My first idea was:
index.html
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
And than for layout 2 (overview.html):
<ion-nav-bar class="bar-balanced">
<ion-nav-buttons side="primary">
...
</ion-nav-buttons>
</ion-nav-bar>
<ion-view view-title="Title Page 2" class="has-header">
<ion-content>
...
</ion-content>
</ion-view>
And for layout 3:
The abstract layout (tabs.html):
<ion-nav-bar class="bar-balanced has-tabs-top">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="primary">
...
</ion-nav-buttons>
</ion-nav-bar>
<ion-tabs class="tabs-striped tabs-top tabs-background-balanced">
<ion-tab title="Dash" icon-off="ion-android-chat" icon-on="ion-android-chat" href="#/tab/dash">
<ion-nav-view name="tab-dash"></ion-nav-view>
</ion-tab>
...
</ion-tabs>
And the specific tab-layout (tab-dash.html):
<ion-view view-title="Dashboard">
<ion-content>
...
</ion-content>
</ion-view>
My app.js:
$stateProvider
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('overview', {
url: '/',
templateUrl: 'templates/overview.html',
controller: 'OverviewCtrl'
})
This doesn't work correct... the title from layout 2 doesn't show up and the tabs doesn't "fusion" with the header correct. Is the hole structer wrong or just the layout files?
You can put the nav bar inside your "root" index.html and control its visibility using the following attributes which might prevent you from having to declare multiple nav-bars in different files.
<ion-view view-title="My View Title" hide-nav-bar="true">
in ionics started template for tabbed applications the suggested approach appears to be to place the navbar outside
Source: https://github.com/driftyco/ionic-starter-tabs/blob/master/index.html
Plnkr for Starter Template with Tabs: http://plnkr.co/edit/qYMCrt?p=preview
I'm building an app with the Ionic Framework. I'm using a tab navigation.
angular.module('myapp', ['ionic'])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.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.news', {
url: "/news",
views: {
'news-tab': {
templateUrl: "templates/news.html"
}
}
})....
First I wrote all code in 1 html file, then for better oversight I wanted to use html include:
<body>
<!-- Layout Setup -->
<ion-nav-bar class="bar-app"></ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script id="templates/tabs.html" type="text/ng-template">
<div ng-include="'sub/tabs.html'"></div>
</script>
<script id="templates/home.html" type="text/ng-template">
<div ng-include="'sub/home.html'"></div>
</script>
<script id="templates/news.html" type="text/ng-template">
<div ng-include="'sub/news.html'"></div>
</script>
....
home.html:
<ion-view view-title="" hide-nav-bar="true">
<ion-content class="padding app-home" scroll="false">
<div class="app-image">
<img class="full-image" src="img/app-logo.svg">
</div>
<div class="row app-home-buttons">
<div class="col">
<a href="#/tab/news">
<button class="button button-balanced button-block icon-top"><i class='icon ion-ios-paper-outline'></i><span>News</span>
</button>
</a>
</div>
</ion-content>
</ion-view>
news.html:
<ion-view view-title="News" ng-controller="NewsRefreshCtrl">
<ion-content class="">
<ion-refresher on-refresh="doRefresh()">
</ion-refresher>
<div class="list">
<a class="item item-thumbnail-left item-text-wrap" href="#">
<img src="img/tile-icon.png">
<h2>Lorem consetetur sadipscing</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At v</p>
</a>
</a>
</div>
</ion-content>
</ion-view>
Now I have the problem that the bar with the site title isn't working anymore. It doesn't show the title and the included html content is laying on top under the bar.
Maybe thats because due to the include it's in a div tag now?
How can I solve this?
I solved the issue by having <div ng-include...> inside <ion-view> within <ion-tab>. Here is the structure you may have to try
<ion-pane>
<ion-tabs>
<ion-tab title="Tab 1"...>
<ion-view>
<div ng-include src="'templates/tab1.html'"></div>
</ion-view>
</ion-tab>
<ion-tab title="Tab 2"... >
<ion-view>
<div ng-include src="'templates/tab2.html'"></div>
</ion-view>
</ion-tab>
</ion-tabs>
</ion-pane>
I encapsulated the templates (tab1.html..) within <ion-content>
templates/tab1.html
<ion-content>
<!--Your Template Content Goes here-->
</ion-content>
This structure works like a charm for me.
http://forum.ionicframework.com/t/tabs-and-ng-include/7863/4?u=kousikraj
This is old, but the best solution was not posted. I found the solution while I still had this open so I figured I'd contribute in case anyone else finds this. You can simply use the ng-include directive as it's own tag
<ion-slide-box>
<ion-slide>
<ng-include src="'templates/slide1.html'"></ng-include>
</ion-slide>
<ion-slide>
<ng-include src="'templates/slide2.html'"></ng-include>
</ion-slide>
<ion-slide>
<ng-include src="'templates/slide3.html'"></ng-include>
</ion-slide>
<ion-slide>
<ng-include src="'templates/slide4.html'"></ng-include>
</ion-slide>
</ion-slide-box>
No need for ion-view in each slide.
Works like this:
-template .html files in /templates folder, remove the script tags
<!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 data-require="ionic#1.0.0-beta.1" data-semver="1.0.0-beta.1" rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="ionic#1.0.0-beta.1" data-semver="1.0.0-beta.1" src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="app.js"></script>
<script src="controllers.js"></script>
<script src="services.js"></script>
</head>
<body ng-app="starter" animation="slide-left-right-ios7">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable nav-title-slide-ios7">
<ion-nav-back-button class="button-icon icon ion-chevron-left">
Back
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
</html>
App.js:
// Ionic Starter App, v0.9.20
// 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'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
StatusBar.styleDefault();
});
})
.config(function($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
// Each tab has its own nav history stack:
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.friends', {
url: '/friends',
views: {
'tab-friends': {
templateUrl: 'templates/tab-friends.html',
controller: 'FriendsCtrl'
}
}
})
.state('tab.friend-detail', {
url: '/friend/:friendId',
views: {
'tab-friends': {
templateUrl: 'templates/friend-detail.html',
controller: 'FriendDetailCtrl'
}
}
})
.state('tab.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'templates/tab-account.html',
controller: 'AccountCtrl'
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/dash');
});
My project is organized in such a way that I want the user to be able to navigate between view in a list that are in a certain order. The default slide transition takes into account the user's navigation history, which is sometimes good and sometimes bad. Is there a way to simply pass along which way I want the view to slide?
Here is a Codepen that demonstrates the issue I am having.
<!-- Codepens on StackOverflow require code to accompany the link. The link is much easier to follow, but here is the code just in case you cannot view the codepen or if the link is broken in the future. -->
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Example</title>
<link href="http://code.ionicframework.com/1.0.0-beta.11/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-beta.11/js/ionic.bundle.js"></script>
<script type="text/javascript">
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "tabs.html"
})
.state('tabs.home', {
url: "/home",
views: {
'home-tab': {
templateUrl: "home.html",
controller: 'HomeTabCtrl'
}
}
})
.state('tabs.detailview', {
url: "/detailview/:index",
views: {
'home-tab': {
templateUrl: "detailview.html",
controller: 'DetailviewTabCtrl'
}
}
});
$urlRouterProvider.otherwise("/tab/home");
})
.controller('HomeTabCtrl', function($scope) {
$scope.details = [{id: 1},{id: 2},{id: 3},{id: 4},{id: 5}];
})
.controller('DetailviewTabCtrl', function($scope,$stateParams) {
$scope.id = parseInt($stateParams.index);
$scope.previous = parseInt($stateParams.index) - 1;
$scope.next = parseInt($stateParams.index) + 1;
});
</script>
</head>
<body>
<ion-nav-bar class="nav-title-slide-ios7 bar-stable">
</ion-nav-bar>
<ion-nav-view animation="slide-left-right"></ion-nav-view>
<script id="tabs.html" type="text/ng-template">
<ion-tabs class="tabs-icon-top tabs-stable">
<ion-tab title="Home" icon="ion-home" href="#/tab/home">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="home.html" type="text/ng-template">
<ion-view title="Home">
<ion-content class="padding">
<p>Example of the navigation issue. If you go to item 1, then item 2, then back to item 1, the transitions look correct.<br/> However, if you start over and go to item 2, then item 3, then back to item 2, then to item 1, the transitions appear to slide in from the wrong direction.</p>
<p>
<ion-list>
<ion-item ng-repeat="detail in details" ng-href="#/tab/detailview/{{detail.id}}" class="item item-icon-right ">
Item {{detail.id}}
<i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
</ion-list>
</p>
</ion-content>
</ion-view>
</script>
<script id="detailview.html" type="text/ng-template">
<ion-view title="Details on item {{id}}">
<ion-content class="padding">
<ion-nav-buttons side="right">
<a ng-href="#/tab/detailview/{{previous}}" class="button button-clear button-dark" ng-disabled="previous == 0"><i class="ion-chevron-left"></i></a>
<a ng-href="#/tab/detailview/{{next}}" class="button button-clear button-dark" ng-disabled="next == 6"><i class="ion-chevron-right"></i></a>
</ion-nav-buttons>
<h2>{{id}}</h2>
<p>Please use the navigation buttons on the top left of the screen.
</p>
</ion-content>
</ion-view>
</script>
</body>
</html>
After you have selected an item, use the navigation buttons on the top right of the screen to navigate back and forth. If you start with the first item, all transitions appear normal. By that I mean, when you press right, the new screen slides to the in from the right. However, if you start with a different item, the direction in which the screen slides in from varies based on your navigation history.
Is there any code changes or attributes that I could use to explicitly state which way I want the screen to side?
You can use nav-direction="back" and nav-direction="forward" on your navigation buttons. http://codepen.io/enbashi/pen/MYRNjy
Hey everyone I've been running into some issues with the header and scrolling on the side menus.
Although I've taken it out from this snippet, i've tried putting class/attr has-header in just about every possible combination:
<ion-side-menus>
<ion-side-menu-content>
<ion-header-bar class="bar-dark">
<button class="button icon ion-arrow-left-a" ng-click='back()'></button>
<h1 class="title">Ionic Shopping Checkout</h1>
<button class='button icon ion-bag' ng-click='toggleRightSideMenu()'></button>
</ion-header-bar>
<ion-purchase></ion-purchase> // custom directive
<ion-purchase-footer></ion-purchase-footer> // custom directive
</ion-side-menu-content>
<ion-side-menu side="right">
<ion-cart has-header='true' ng-controller='CartController'></ion-cart> // custom directive
</ion-side-menu>
</ion-side-menus>
Additionally, my ng-repeat of items in the side menu isn't scrolling, even when I nest them in an ion-scroll element. This is likely a completely unrelated issue, however I'm curious if anyone has come across that issue too.
Thanks for all the help in advance!
As mentioned above, the has-header attribute has in fact been removed. However, the has-header class still exists. Generally speaking, you don't need to manage those now.
I've setup a sample that should solve all of your problems.
http://codepen.io/calendee/pen/Fuejf
The key points are the same as those comments above, you content needs to go inside the ion-content directives.
Here is the HTML:
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Side Menus</title>
<link href="http://code.ionicframework.com/1.0.0-beta.6/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-beta.6/js/ionic.bundle.js"></script>
</head>
<body>
<div ng-controller="AppController">
<ion-nav-view></ion-nav-view>
</div>
<script id="app.html" type="text/ng-template">
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-dark">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()">
</button>
</ion-nav-buttons>
<ion-nav-view name="appContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-assertive">
<h1 class="title">Left Menu</h1>
</ion-header-bar>
<ion-content>
<ion-cart ng-controller='CartController'></ion-cart>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</script>
<script id="home.html" type="text/ng-template">
<ion-view title="Ionic Shopping Checkout">
<ion-content padding="true">
<ion-purchase></ion-purchase>
</ion-content>
</ion-view>
</script>
<script id="ionCart.html" type="text/ng-template">
<div class="list">
<div class="item" ng-repeat="item in data.items">{{item.label}}</div>
</div>
</script>
</body>
</html>
Here is the JS:
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "app.html"
})
.state('app.home', {
url: "/home",
views: {
'appContent' :{
templateUrl: "home.html",
controller : "HomeController"
}
}
})
$urlRouterProvider.otherwise("/app/home");
})
.controller('AppController', function($scope, $ionicSideMenuDelegate) {
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
})
.controller("HomeController", function($scope) {
})
.controller("CartController", function($scope) {
$scope.data = {
items : []
};
for(var i = 0; i < 25; i++) {
$scope.data.items.push({
id : i,
label : "Item " + i
})
}
})
.directive("ionCart", function() {
return {
restrict : "E",
templateUrl : "ionCart.html"
}
})
.directive("ionPurchase", function() {
return {
restrict : "E",
template : "<h2>This is Ion Purchase</h2>"
}
})