ion-nav-bar shows properly in Firefox and Safari. In Google Chrome it isn’t showing up - it has a class called “invisible” attached to it. If the class is removed or its css is disabled then the top nav bar shows up normally.
I am having this same exact issue. My app works fine in Firefox, Safari, the IOS Simulator. It fails in Chrome. I see the invisible class as well. Are you getting any JS errors in your console? I get the following in Chrome only. Firefox does not have this in the console:
TypeError: Cannot read property 'exp' of undefined
at watchFnToHumanReadableString (<anonymous>:703:19)
at Scope.$delegate.__proto__.$watch (<anonymous>:735:28)
at link (http://127.0.0.1:9000/bower_components/ionic/release/js/ionic-angular.js:5090:16)
at nodeLinkFn (http://127.0.0.1:9000/bower_components/angular/angular.js:6230:13)
at compositeLinkFn (http://127.0.0.1:9000/bower_components/angular/angular.js:5640:15)
at publicLinkFn (http://127.0.0.1:9000/bower_components/angular/angular.js:5545:30)
at updateView (http://127.0.0.1:9000/bower_components/ionic/release/js/ionic-angular.js:5291:11)
at eventHook (http://127.0.0.1:9000/bower_components/ionic/release/js/ionic-angular.js:5235:17)
at Scope.$broadcast (http://127.0.0.1:9000/bower_components/angular/angular.js:12261:28)
at $state.transition.resolved.then.$state.transition (http://127.0.0.1:9000/bower_components/angular-ui-router/release/angular-ui-router.js:1290:22) <ion-view class="pane">
I am not sure if this error specific to my app or if it is related to this problem, but it seemed like it might be relevant. I did notice that some transitions seem to not be firing at times.
Edit: I was able to fix my error and as far as I can tell it seems unrelated to the problem of the hidden nav bar, which still exists.
For those that might be having the same error as I posed, angular-ionic.js needs to check if the attribute exists before attaching a watcher. Change lines 5090 through 5098 of angular-ionic.js from this:
$scope.$watch($attr.hideBackButton, function(value) {
// Should we hide a back button when this tab is shown
navBarCtrl.showBackButton(!value);
});
$scope.$watch($attr.hideNavBar, function(value) {
// Should the nav bar be hidden for this view or not?
navBarCtrl.showBar(!value);
});
to this:
if($attr.hideBackButton) {
$scope.$watch($attr.hideBackButton, function (value) {
// Should we hide a back button when this tab is shown
navBarCtrl.showBackButton(!value);
});
}
if($attr.hideNavBar) {
$scope.$watch($attr.hideNavBar, function (value) {
// Should the nav bar be hidden for this view or not?
navBarCtrl.showBar(!value);
});
}
Unfortunately this did not solve the invisible header bar.
Just to clarify, I said ‘fails in chrome’, but actually my views are loaded into the nav-bar-view just fine. It is just the nav-header that doesn’t show.