Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Problem with ons.ready ...

  • Hi, I have a problem with ons.ready, this doesn’t load, the following is my code:

    <!DOCTYPE html>
    <!-- CSP support mode (required for Windows Universal apps): -->
    <html lang=“en” ng-app=“app” ng-csp>
    <meta charset=“utf-8” />
    <meta name=“apple-mobile-web-app-capable” content=“yes” />
    <meta name=“mobile-web-app-capable” content=“yes” />
    <!-- JS dependencies (order matters!) -->
    <script src=“scripts/platformOverrides.js”></script>
    <script src=“lib/angular/angular.js”></script>
    <script src=“lib/onsen/js/onsenui.js”></script>
    <!-- CSS dependencies -->
    <link rel=“stylesheet” href=“lib/onsen/css/onsenui.css” />
    <link rel=“stylesheet” href=“lib/onsen/css/onsen-css-components.css” />
    <link rel=“stylesheet” href=“lib/onsen/css/onsen-css-components-blue-basic-theme.css” />
    <!-- CSP support mode (required for Windows Universal apps) -->
    <link rel=“stylesheet” href=“lib/angular/angular-csp.css” />
    <script src=“lib/jquery/jquery-2.1.4.min.js”></script>
    <script src=“scripts/index.js”></script>

    <!-- --------------- App init --------------- -->
    <title>Onsen UI Sliding Menu</title>
        angular.module('app', ['onsen']);
        ons.ready(function () {
            var content = document.getElementById('content');
            content.innerHTML = "<ons-button>Another button</ons-button>";

  • @FranciscoValdes you may need to call ons.compile(content); as last statement in ons.ready(…).


  • Onsen UI

    @FranciscoValdes , @CNaik is right, for AngularJS you need to compile the new elements after attaching them.

    Also, either remove angular.module('app', ['onsen']); + ng-app=“app” or ons.bootstrap(). You are bootstrapping twice. Read this for more information.