CODEWITHSUNDEEP
javascriptangularjs
A191919
A191919

Reputation: 3442

Angularjs language localization

  1. Why after invoking English() or France() functions value of $scope.currentLanguageId in myFilter does not change?
  2. 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;
    };
});

Upvotes: 1

Views: 62

Answers (1)

Louie Almeda
Louie Almeda

Reputation: 5612

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

Upvotes: 1

Related Questions