Angularjs language localization

Question

Why after invoking English() or France() functions value of $scope.currentLanguageId in myFilter does not change?
Is it normal way to make different localization of site by filters? Or existing may be more common way?

List:

<div ng-init="GetList()">
    <div ng-repeat="item in items | filter: myFilter">
        {{item.Text}} {{item.LanguageId}}
    </div>
</div>

Menu:

<div class="menu">
    <ul>
        <li><a href="#/about">About</a></li>
        <li><a href="#/contacts">Contacts</a></li>
        <li><a>Test</a></li>
        <li><a>Test</a></li>
        <li><a>Test</a></li>
        <li><input type="button" value="En" ng-controller="homeController" ng-click="English()" /></li>
        <!--<li><a>En</a></li>
        <li><a>Fr</a></li>-->
    </ul>
</div>

Controller:

app.controller('homeController', function ($scope, $http) {
    $scope.items = [];
    $scope.currentLanguageId = '';
    $scope.GetList = function () {
        $http({
            method: 'GET',
            url: '/Home/GetList',
            params: { languageId: '1'}
        }).then(function successCallback(response) {
            $.each(response.data, function (id,item) {
                $scope.items.push({ Text: item.Text, LanguageId: item.LanguageId });
            });
    }, function errorCallback(response) {
        alert('Error');
    });
    }
    $scope.English = function () {
        $scope.currentLanguageId = '2';
    }
    $scope.France = function () {
        $scope.currentLanguageId = '3';
    }
    $scope.myFilter = function (item) {
        console.log($scope.currentLanguageId);
        return item.LanguageId == $scope.currentLanguageId;
    };
});

I have personally used angular-translate (i18n) which I think would be something you could also take a look at: angular-translate.github.io — thepio
– thepio, Commented May 26, 2016 at 10:16

Louie Almeda · Accepted Answer · 2016-05-26 10:26:12Z

DEMO I would create a service for that, and attach it to the $rootScope so it is available everywhere in my application and does not need to be injected in each controller

var app = angular.module('app', []);

app.run(function(langService){

  langService.fetch('spanish');

});

app.controller('MainController', function(){

  var vm = this;

});

app.service('langService', function($rootScope){

  this.current = {};

  this.fetch = function(lang){

    //do your fetching here with $http
    $rootScope.lang = {

      ok: 'si',
      yes: 'si',
      no: 'no'

    };

  };

});

then you can use it anywhere in your app like

<button>{{$root.lang.ok}}</button>
<button>{{$root.lang.no}}</button>

Other things worth pointing out:

Your controller is too fat, you should not put logic on your controller, logic should be in services
Avoid using ng-init as much as possible, do it inside the controller

Collectives™ on Stack Overflow

Angularjs language localization

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related