Onsen UI - Data binding not working

Question

Onsen UI - Data binding not working

546 Views Asked by Juan Colombia At 28 April 2025 at 06:41

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>

Original Q&A

There are 2 best solutions below

Juan Colombia On 08 January 2017 at 19:21

Thanks again for your help. Regarding the text data binding with the input, I nearly managed to fix it as well:

<script>
var app = angular.module('myApp', ['onsen']);
app.controller('todoCtrl', function($scope) {
ons.notification.alert('welcome!');

    $scope.name = 'Default';

$scope.clickHandler = function(event) {
  ons.notification.alert('Hello ' + $scope.name);
}


});

</script>


</head>

<body>

<ons-span ng-bind='name'></ons-span>

<br>


<ons-input ng-model='name' placeholder='Your Name' float></ons-input>


<br>
<ons-button ng-click='clickHandler()'>Say Hello</ons-button>

</body>
</html>

Each time I click on the "Say Hello" button, data binding updates itself :

However it does not updates automatically without clicking the button.

I observed that if I replace "ons-input" by "input", the data binding updates automatically but I loose the Onsen style of the input... I would like to keep all my html elements as ons- if possible.

Thank you very much !

**tasseKATT** · Accepted Answer

Replace all “ with either " or '.

Inject $scope into your controller:

module.controller('AppController', function($scope) { ...

Change:

ng-click="clickHandler"

To:

ng-click="clickHandler()"

Demo: http://plnkr.co/edit/HomH2oTmESLrs7zSrKei?p=preview

Onsen UI - Data binding not working

There are 2 best solutions below

Related Questions in ANGULARJS

Related Questions in ONSEN-UI

Trending Questions

Popular # Hahtags

Popular Questions