Search code examples
javascriptangularjsonsen-ui

Use ons.enableAutoStatusBarFill in in onsen ui with angularjs


i am completely new to Angularjs trying to understand how can i use ons.enableAutoStatusBarFill(); this so i my menus wont over take the status bar.

here is how i have my controller setup.

var mod = ons.bootstrap('app', ['onsen']);

mod.controller('MyControler', function($scope) {

ons.ready(function() {

            // code inside...

    });           
});

Any suggestions will be helpful. I am using this reference http://onsen.io/guide/overview.html#UtilityAPIs

I tried to solve it this way

var module = ons.bootstrap('my-app', ['onsen', 'ngSanitize']);
var module = ons.enableAutoStatusBarFill();

It seems like working but its not finding my controllers now. Getting this error

Uncaught TypeError: Cannot read property 'controller' of undefined

Solution

  • I got it solved. Actually the cordoda file was at the bottom of my page. Due to which the page was not able to load properly.

    Now i added in this pattern in my index.html and got it resolved.

     <script src="lib/onsen/js/angular/angular.js"></script>    
      <script src="lib/onsen/js/onsenui.js"></script>    
      <script src="lib/onsen/js/angular/angular-sanitize.min.js"></script>
      <script src="cordova.js"></script> //This should be added first before the main custom.js file which starts my module.
    
      <script src="js/custom.js"></script>
    

    Thank you for all your support!