How to remove duplicate common functions between controllers

Question

I need to use the i18n betweens translation features.

Therefore, each controller must have getCityNameand getCountryNamein order to translate it into the correct lang.

I tried using the Angular service to reduce duplication.

As you can see, I still need to define these functions in the two controllers separately.

Is it possible to remove duplication of defining functions in controllers in my case?

thanks

Departure.html

  <div  ng-repeat="departure in departures_lst">
    <div class="panel-title">
      <h5>{{getCountryName(departure.country)}}</h5>
    </div>
            <li  ng-repeat="city in departure.cities">
              <a ng-click="get_destinations(city)">
                {{getCityName(city)}}
              </a>
           </li>
  </div>

Arrival.html

  <div  ng-repeat="arrive in arrives_lst">
    <div class="panel-title">
      <h5>{{getCountryName(arrive.country)}}</h5>
    </div>
            <li  ng-repeat="city in arrive.cities">
              <a ng-click="get_destinations(city)">
                {{getCityName(city)}}
              </a>
           </li>
  </div>

Angular js

App.service('I18nService', function () {
    this.getCountryName = function (country_name) {
      return I18n.t("country." + country_name) + country_name
    }
    this.getCityName = function (city_name) {
      return I18n.t("city." + city_name) + city_name
    }
});

App.controller("departures_ctrl", function($scope, I18nService, $location, $http) {
    $scope.getCountryName = function(country_name){
      return I18nService.getCountryName(country_name);
    }
    $scope.getCityName = function(city_name){
      return I18nService.getCityName(city_name);
    }
});

App.controller("arrivals_ctrl",  function($scope, $route, I18nService, $routeParams, $http, $window, $location) {
    $scope.getCountryName = function(country_name){
      return I18nService.getCountryName(country_name);
    }
    $scope.getCityName = function(city_name){
      return I18nService.getCityName(city_name);
    }


});

Answer 1

One way to avoid repetition is to add a parameter to the service functions.

You can write something like the following:

app.controller('FooCtrl', function($scope, TranslationService){

  $scope.getName = function(name, flag){
   TranslationService.getName(name,flag); 
  }

});

app.controller('BarCtrl', function($scope, TranslationService){

  $scope.getName = function(name, flag){
   TranslationService.getName(name,flag); 
  }

});

app.factory('TranslationService', function(){

  return {
    getName: function(name,flag){
      if(flag == 'city'){
          //...
      } 
      else{
        //...  
      }
    }
  }
})

And in your HTML view you can use:

<div ng-app="myApp" ng-controller="FooCtrl">

  <p>{{getName(obj.city, 'city')}}</p>

</div>

getName , , , $rootScope, IMO , .

Answer 2

, , (. https://softwareengineering.stackexchange.com/a/222673), ,

<div  ng-repeat="departure in departures_lst">
    <div class="panel-title">
      <h5><country-name ng-model="departure.country"></country-name></h5>
    </div>
    <li  ng-repeat="city in departure.cities">
      <a ng-click="get_destinations(city)">
         <city-name ng-model="departure.country"></city-name>
      </a>
    </li>
</div>

, .

(.. - ), .