1

I am trying to learn angular-translate using messageformat. When I click my button to change language, i get an error 'undefined is not a function' - but it's not 100% reliable. It happens very easily, but I am not sure which change triggers the error.

Reproduced by: Tested in Chrome 41 Firefox developer edition 39 and IE11 also. Does not work.

Here is how I reproduced it in detail: On fresh load: Set variable to another number (eg. 3) while still English. Change to Norwegian. Change number to something else. Change back to English. When I try to change the number now, it doesn't work anymore I have recreated my code in a plunker: http://plnkr.co/edit/K4xHNf93Vhkrfc5LmliV?p=preview

The code is the following:

HTML:

<div ng-controller="Controller as Ctrl">
    <h1>{{ 'TITLE' | translate }}</h1>
    <p>{{ 'FOO' | translate }}</p>
    <input type="number" ng-model="translationData.NUM">
    <p>{{ 'PLURAL' | translate:translationData}}</p>
    <button ng-click="changeLanguage('en')">{{ 'BUTTON_LANG_EN' | translate}}</button>
    <button ng-click="changeLanguage('de')">{{ 'BUTTON_LANG_DE' | translate}}</button>
    <button ng-click="changeLanguage('no')">{{ 'BUTTON_LANG_NO' | translate}}</button>
</div>

Javascript:

angular.module('app', ['pascalprecht.translate'])
.config(function ($translateProvider) {
    $translateProvider.translations('en', {
        TITLE: 'Hello',
        FOO: 'This is a paragraph.',
        BUTTON_LANG_EN: 'English',
        BUTTON_LANG_DE: 'German',
        BUTTON_LANG_NO: 'Norwegian',
        PLURAL: "You have {NUM, plural, =0{no messages} one{1 message} other{# messages}}."
    });
    $translateProvider.translations('de', {
        TITLE: 'Hallo',
        FOO: 'Dies ist ein Paragraph.',
        BUTTON_LANG_EN: 'Englisch',
        BUTTON_LANG_DE: 'Deutsch',
        BUTTON_LANG_NO: 'Norwegisch',
        PLURAL: "Sie haben {NUM, plural, =0{keine Nachrichten haben} one{1 Nachricht} other{# Nachrichten}}."
    });
    $translateProvider.translations('no', {
        TITLE: 'Hei',
        FOO: 'Dette er en paragraf',
        BUTTON_LANG_EN: 'Engelsk',
        BUTTON_LANG_DE: 'Tysk',
        BUTTON_LANG_NO: 'Norsk',
        PLURAL: "Du har {NUM, plural, =0{ingen meldinger} one{1 melding} other{# meldinger}}."
    });
    $translateProvider.useMessageFormatInterpolation();
    $translateProvider.preferredLanguage('en');
    $translateProvider.fallbackLanguage('en');

})
.controller('Controller', function ($scope, $translate) {
    $scope.translationData = {
        NUM: 0
    };
    $scope.changeLanguage = function (key) {
        $translate.use(key);
    };
});

Screenshot of the problem

Gjermund Bjaanes
  • 265
  • 3
  • 10
  • I have run the plunker which you have provided it's working fine... – Reena Apr 13 '15 at 06:56
  • Try to change the number variable, then change languages a couple of times and change the number each time also. For me it stops working and there are errors in the console (running locally it says undefined in the output, but in the plunker the bound doesnt work anymore) – Gjermund Bjaanes Apr 13 '15 at 07:21
  • Still works. Which browser are u using? – Reena Apr 13 '15 at 07:24
  • Chrome 41. Tested in Firefox and IE also. Does not work. Here is how I reproduced it in detail: On fresh load: Set variable to another number (eg. 3) while still English. Change to Norwegian. Change number to something else. Change back to English. When I try to change the number now, it doesn't work anymore – Gjermund Bjaanes Apr 13 '15 at 10:48
  • I ran the plunker. Looks like you need to have "make-plural" also for message-format to pluralize. I get a different error `TypeError: undefined is not a function at MessageFormat.runtime.plural (http://run.plnkr.co/dOcNRGwLQX9scW7v/messageformat.js:1549:15)` – Anirudh Apr 15 '15 at 07:51

0 Answers0