CODEWITHSUNDEEP
angularjshtml-selectchromiumangular-translate
cupakob
cupakob

Reputation: 8531

angular-tanslate with dropdown doesn't work under Chromium

I have translated an application. If i use <ul> for the language select, everything is working fine. When i switch to <select>, then i have problems under chromium. But with Firefox is still working fine. Here 2 code fragments:

  1. HTML part

<select id="SelectLang" ng-controller="LanguageSelectController">
  <option ng-click="changeLang('de_DE')">{{'LANGUAGE_FIELD_GERMAN'|translate}}</option>
  <option ng-click="changeLang('en_EN')">{{'LANGUAGE_FIELD_ENGLISH'|translate}}</option>
</select>

  1. JS Part
app.controller('LanguageSelectController', function ($scope, $translate) {
    $scope.changeLang = function (key) {
        $translate.use(key).then(function (key) {
            console.log("Sprache zu " + key + " gewechselt.");
    }, function (key) {
            console.log("Irgendwas lief schief.");
        });
    };
});

Does anyone have the same problem? Any suggestions?

Upvotes: 0

Views: 356

Answers (1)

Steve
Steve

Reputation: 1095

Having a look at your plunker, I have updated it with a working version:

http://plnkr.co/edit/6P4V5qD7SIcTdKpYxWm2?p=preview

There were a few things that were possibly causing the issue. I have put comments in the plunker with the changes, as well as listed them below. The files to look at are script.js and index.html.

The thing that is missing from your plunker is that you have not defined an ng-app attribute in the html. I added ng-app="app" to the body element. Without this, the angular app will not bootstrap. So none of your angular was being executed.

There was also a missing closing bracket at the end of the config block, this could just be when you were writing the plunker, but it might have also caused problems.

Lastly, the script.js file needs to be loaded after the angular.js file. Otherwise angular is not defined at the point that script.js is parsed.

Edit:

I have updated the plunker:

http://plnkr.co/edit/54Fk0uP9jn8CzmDnNZNr?p=preview

I think I had misunderstood the problem. The problem was with how the select element was being written. It would seem that the ng-click on the option elements wasn't firing in chrome. Using an ng-change on the select element itself, and having an ng-model on the element works around this problem. It also cleans up the html a little and makes it easier to extend with more options.

Upvotes: 1

Related Questions