I’m developing a hybrid app using Phonegap and Ionic framework.
I have a login where the loginController works as intended but when I run the code to hide status bar as shown below, the status bar gets hidden, but the javascript functions don’t work anymore.
When I press login button, the whole page seems to flicker (refresh I guess) and nothing happens.
If I remove the code used to hide the status bar, the login functions work again.
What am I doing wrong? Please help.
JS
angular.module('loginctrl', ['ionic'])
.controller('LoginController', function ($scope, $state, $rootScope, AUTH_EVENTS, AuthService) {
ionic.Platform.ready(function() {
// hide the status bar using the StatusBar plugin
StatusBar.hide();
});
$scope.credentials = {
username: '',
password: ''
};
$scope.login = function (credentials) {
$scope.loginFlag=true;
AuthService.login(credentials).then(function (user) {
console.log("vame"+user);
$rootScope.$broadcast(AUTH_EVENTS.loginSuccess);
console.log('loginSuccess');
//$scope.setCurrentUser(user);
$state.go('app.playlists');
}, function () {
$rootScope.$broadcast(AUTH_EVENTS.loginFailed);
console.log('loginFailed');
$scope.loginFlag = false;
});
};
})
;
do you get any error when hiding the statusbar like Statusbar is Undefined?
you could also put this inside the run method of your app:
angular.module('myApp', [ 'ionic',...]).run(function($ionicPlatform){
$ionicPlatform.ready(function() {
// hide the status bar using the StatusBar plugin
StatusBar.hide();
});
...
I tested this using the xCode iOS Simulator as well as in Chrome browser.
I did add the code you posted here in the head of index.html as the last script before closing head tags, and removed the ng-app as you said, but it still doesn’t work.
Double check in your Plugin directory if org.apache.cordova.statusbar is there, if not:
cordova plugin add org.apache.cordova.statusbar```
I usually use the bootstrapping just like @Auro said. don't forget to change the 'myApp' to your ng-app name!
I’m also running into this problem. I get the following error
ReferenceError: StatusBar is not defined
It does actually do what it’s supposed to do, my status bar goes away, but the error breaks my methods, so nothing fires. My app.js code looks
.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) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
If I try and use ngCordova, I more or less get the same problem:
TypeError: Cannot read property 'hide' of undefined
What is most frustrating is that the status bar is hidden, it appears as if the plugin is working when testing in the browser, but not in iOS. When I try and log in it flickers and fails. I’ve tried the suggestions in this thread to no avail and wondering if others in the discussion figured it out? Here is my js:
log_in.js
angular.module('chronicleMe')
.controller('LogInCtrl', function ($scope, $timeout, $rootScope, $state, Auth,
$cordovaStatusbar) {
ionic.Platform.ready(function() {
// hide the status bar using the StatusBar plugin
StatusBar.hide();
});