Problem with ons.ready ...

FranciscoValdes

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

<!DOCTYPE html>

<html lang=“en” ng-app=“app” ng-csp>
<head>
<meta charset=“utf-8” />
<meta name=“apple-mobile-web-app-capable” content=“yes” />
<meta name=“mobile-web-app-capable” content=“yes” />

<script src=“scripts/platformOverrides.js”></script>
<script src=“lib/angular/angular.js”></script>
<script src=“lib/onsen/js/onsenui.js”></script>

<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” />

<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>
<script>
    angular.module('app', ['onsen']);
    ons.bootstrap();
    ons.ready(function () {
        alert('hola');
        var content = document.getElementById('content');
        content.innerHTML = "<ons-button>Another button</ons-button>";
    });
    
</script>

CNaik

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

Regards,
CNaik.

Fran Diox

@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.