I wonder to know if there is any bad smell on my practice for i18n on Angular. I put the I18n translating function on Angular controller (because I don't know how to put it on HTML template file)
And about the i18n scope, I use this way I18n.t("city." + city_name)
to indicate that the city_name is under "city" scope. Could I write it in this way I18n.t(city_name, scope: "city")
to make it more understandable.
I appreciate every comment and suggestion to enhance my current solution.
Data structure
departures_lst is a list of countries' English name e.g.,: [US, China, Japan]
Each country has many cities name. e.g. [New York, LA, Boston]
Angular controller
App.controller("departures_ctrl", function($scope, $location, $http) {
$http.get("/departures.json")
.success(function (response) {
$scope.departures_lst = response;
});
$scope.get_destinations = function(city_name) {
return $location.url("/depart_from/" + city_name);
};
$scope.i18nCountryName = function(country_name) {
return I18n.t("country." + country_name) + country_name
};
$scope.i18nCityName = function(city_name) {
return I18n.t("city." + city_name) + city_name
};
});
HTML teamplate?
<div class="panel panel-transparent" ng-repeat="departure in departures_lst">
<h5>{{i18nCountryName(departure.country)}}</h5>
<li class="col-sm-3 col-lg-3 col-xs-3" ng-repeat="city in departure.cities">
<a ng-click="get_destinations(city)">
<i class="fa fa-plane"></i>
{{i18nCityName(city)}}
</a>
</li>
</div>