Monaca Onsen UI Discord Chat Github Repo

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.