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>


  • Onsen UI

    @cedric.onsen Just check this tutorial. Among other things, I think you want to use ng-model instead of ng-bind. You can add <ons-input ng-model="page.title"></ons-input> to the code to test it.


Log in to reply