I am handling a lot of different view states and I must be making a wrong call or have a controller issue because when I select anything other than my subheader it will reposition that subheader under my main header.
This is what is looks like
On startup
Header button for listview works BUT loads between the map and its zoom levels
If the map gets touched it repositions itself and hides behind the ion-nav-bar in my menu.html
images also seen in this stackoverflow question
Anytime I select the leaflet map it pushes my “Discover List” (in my discover-home.html) button under my apps ion-nav-bar in my discover-menu.html. In addition, you can see that this list view is in-between my map and the zoom icons, also if do not touch the map and I switch tabs and come back I cannot open the list again.
I’m not sure what is causing the problem and included some snippets in hopes someone could help me figure out what is causing the problem.
index.html
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
discover-tabs-controller.html
Note: This controls the tabs views (one of which is discover-home.html)
<ion-view>
<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
<ion-tabs class="tabs-positive tabs-icon-only" >
<ion-content has-subheader="true"></ion-content>
<!--HOME TAB [OPEN]-->
<ion-tab title="Discover" icon-on="icon ion-home" icon-off="icon ion-home"
href="#/app/discover/home">
<ion-nav-view cache-view="true" name="home-tab"></ion-nav-view>
<!-- View For Home.html -->
</ion-tab>
<!--HOME TAB [CLOSED]-->
<!--MORE TABS HERE-->
</ion-content>
</ion-tabs>
</div>
</ion-view>
Discover-home.html
<ion-view view-title="Home">
<!--SUBHEADER BUTTON: DISPLAY LISTVIEW -->
<div ng-controller="FrostCtrl" class="bar bar-subheader button bar-balanced" ng-click="pushFrost()">
<h2 class="title">{{title}} List</h2>
</div>
<!--DISPLAY OVERLAY WITH LIST-->
<ion-pane ng-controller="OverlayCtrl" class="dark-overlay" ng-show="showOverlay">
<ion-content class="has-subheader">
<button class="button button-block button-outline button-balanced" ng-click="hideFrost()">Dismiss
</button>
<ion-list>
<ion-item ng-repeat="item in items" class="dark-item">
{{item.text}}
</ion-item>
</ion-list>
</ion-content>
</ion-pane>
<!--LEAFLET MAP -->
<leaflet class="has-subheader padding"center="nassau" paths="paths" tiles="tiles" markers="markers" defaults="defaults">
</leaflet>
</ion-view>
controller.js
angular.module('starter.controllers', [])
...
// #######| LEAFLET MAP |#######
.controller('ActivityCntl', [ '$scope', 'leafletData', function($scope, leafletData) {
var tileSource = {
onlineTiles: {
url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
},
};
angular.extend($scope, {
nassau: {
lat: 25.074521,
lng: -77.318191,
zoom: 13
.........
});
}])
// #######| SHOW OVERLAY |#######
.controller('FrostCtrl', ['$scope', '$rootScope', '$compile', function($scope, $rootScope, $compile) {
$scope.pushFrost = function() {
var el = angular.element(document.getElementById('myPane'));
el.attr('frost', '');
el = $compile(el)($scope);
$rootScope.showOverlay = true;
};
}])
//#######| DISPLAYS CONTENTS |##########
.controller('OverlayCtrl', function($scope, $rootScope, $compile) {
$scope.items = [];
for(var i = 0; i < 5; i++) {
$scope.items.push({
text: 'Whatever ' + (i+1)
});
}
$scope.hideFrost = function() {
$rootScope.showOverlay = false;
var el = angular.element(document.getElementById('myPane'));
};
})
app.js
config(['$stateProvider', '$urlRouterProvider','$locationProvider',function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('app', {
name: 'app',
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('app.discover', {
name: 'app.discover',
url: "/discover",
views: {
'menuContent': {
templateUrl: "templates/discover-tabs-controller.html"
}
}
})
// for my discover-home.html
.state('app.discover.home', {
url: "/home",
views: {
'home-tab': {
templateUrl: "templates/discover-tabs/discover-home.html",
controller: 'ActivityCntl'
},
'discover-home-listview': {
templateUrl: "templates/discover-tabs/discover-home.html",
}
}
})
menu.html
Note: Just in case. This controls the sidemenu items
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
//IT GETS PUSHED UNDER THIS
<ion-nav-bar class="bar-calm">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">MYApps</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close ng-click="login()">
<i class="icon ion-person"></i>
Login
</ion-item>
<ion-item menu-close href="#/app/discover">
<i class="icon ion-location"></i>
Discover
</ion-item>
<ion-item menu-close href="#/app/map">
<i class="icon ion-map"></i>
Map
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>