Monaca Onsen UI Discord Chat Github Repo

ng-bind no longer works after upgrading AngularJS app from Onsen 2.0.4

  • I’ve got an older app I developed in AngularJS and Onsen 2.0.4 that I’m trying to convert to the latest release of Onsen (2.9.2). There’s several thing it looks like I need to fix, but right off the bat, I noticed nearly all my text disappeared. I write all the text to the screen using ng-bind because I have to support several languages. Here’s a sample of the first screen that appears:

    <div><img src="img/logo.png" /></div>
    <div class="large-search-bar">
        <img src="img/Search-Icon.png" ng-click="SearchFromJumpStart()" class="search-icon-large" align="right" />
        <input id="SearchJumpStart" type="number" class="embedded-textbox" ng-pattern="regexZipCode" onkeyup="return isKeypressEnter(event, callJumpStartSearch)" ng-attr-placeholder="{{translations['search-by-zip-code']}}" only-digits>
    <div><button ng-click="GoToSignInPage()" ng-bind="translations['sign-in']"></button></div>
    <div><button ng-click="GoToCreateAccountPage()" ng-bind="translations['create-account']"></button></div>

    There is a placeholder for the input and two buttons beneath it, both of which are populated using the Angular ngBind function, but none of them show text after I upgraded Onsen. I checked several versions and it looks like this change happened at 2.0.5 (go figure).

    Within the code of the app, I’m setting the text using the scope:

    angular.module('app').controller('AppController', function ($scope, $mdDialog) {
        $scope.translations = {};
        $scope.BuildTranslations = function () {
            $scope.translations['search-by-zip-code'] = "SEARCH BY ZIP CODE";
            $scope.translations['sign-in'] = "SIGN IN";
            $scope.translations['create-account'] = "CREATE ACCOUNT";

    I’d very much appreciate any help with this that can be provided. Thanks!

  • administrators

    I had a look at the code you provided, but all I can see is that BuildTranslations is never used.

    Could you please provide a working sample through ? From there you can export it to Codepen.

    If you can post a working sample, I will go through the Onsen UI commits to see what’s causing it to break for you.

  • @emccorson I just pulled out a sample, but it’s calling BuildTranslations elsewhere in the code. And everything works correctly with 2.0.4. I’ll see what I can do with the playground and get back to you. Thanks!

  • @emccorson I can get it to work in the Onsen UI Playground for the most part as shown here, but as soon as I try to swap out this part of the workign CodePen:
    ons.bootstrap().controller('AppController', function($scope) {

    for this line that I have in my code:
    angular.module('app').controller('AppController', function($scope) {

    it breaks.

    Maybe something changed in the 2.0.5 release that angular.module('app').controller... no longer works with?
    Typically, I wouldn’t have a problem working with ons.bootstrap(), but I have a function set up to listen for the deviceready event that calls an AppInit function within the AppController scope. Is there an example of how this should be handled in the latest Onsen that you could point me to?

    Thanks again.

  • I finally got it working after a lot of trial and error.

    For anyone else struggling with a similar issue, I had to remove ng-app="app" from my html tag.
    It was formerly <html lang="en" ng-app="app"> and I changed it to just <html lang="en">

    Then, I had set up my app’s module using
    var appEnvironment = angular.module('app', ['onsen.directives', 'ngSanitize', 'ngAnimate', 'ngAria', 'ngMessages', 'ngTouch', 'ngMaterial']);
    along with my controller later defined as
    appEnvironment.controller('AppController', function ($scope, $mdDialog) {

    For some reason between Onsen 2.0.4 and 2.0.5, this broke. It seems like ons.bootstrap() is now required maybe?

    Anyhow, I have it working now with the following set up:
    <html lang="en">

    <body ng-controller="AppController">
    and my code:
    ons.bootstrap(document.body, ['onsen.directives', 'ngSanitize', 'ngAnimate', 'ngAria', 'ngMessages', 'ngTouch', 'ngMaterial']).controller('AppController', function ($scope, $mdDialog) {

    Thanks for directing me to the Onsen UI Playground, @emccorson. That helped me figure out where the problem was, then it just took a bit of experimenting.