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.
Data binding not working fine
-
Good morning everybody,
I am new in Onsen UI, using Angular JS v1.6.1 and Onsen UI v2.
I can’t figure out why my data binding does not work. CSS and JS files seem to load OK but when I open the html file :
1 - button does not show the notification when I click it
2 - The text “Default” does not appear and {{myName}} shows instead
3- Filling the input fill does not update {{myName}}I have followed the Onsen UI guide (https://onsen.io/v2/docs/guide/angular1/)… I do not understand what could be the problem. I would be very grateful if some of you guys could help me on this topic.
Have a good day !
Cedric
<!doctype html>
<html lang=“en” ng-app=“my-app”>
<head>
<meta charset=“utf-8”>
<link rel=“stylesheet” href=“onsenui/css/onsenui.css”/>
<link rel=“stylesheet” href=“onsenui/css/onsen-css-components.css”/>
<script src=“js/angular.min.js”></script>
<script src=“onsenui/js/onsenui.js”></script>
<script src=“onsenui/js/angular-onsenui.js”></script>
<script>var module = angular.module('my-app', ['onsen']); module.controller('AppController', function() { ons.notification.alert('Welcome !'); $scope.myName = "Default"; $scope.clickHandler = function(event) { ons.notification.alert('Hello ' + $scope.myName);} }); </script>
</head>
<body ng-controller=“AppController”>
{{myName}}
<br> <br>
<ons-input ng-bind=“myName” placeholder=“Your Name” float></ons-input>
<br> <br>
<ons-button ng-click=“clickHandler”>Say Hello</ons-button>
</body>
</html>
-
@cedric.onsen Just check this tutorial. Among other things, I think you want to use
ng-model
instead ofng-bind
. You can add<ons-input ng-model="page.title"></ons-input>
to the code to test it.