2016-04-01 4 views
0

Я хочу использовать $translate внутри моего контроллера, и когда я меняю язык, все строки переводятся, это работает, когда я использую: {{'Menu.CANDIDATURES.VIEW' | translate}}, но я хочу использовать его и на моем контроллере.

для этого я использовал $watch следующим образом:

.controller('CandidaturesDatatableCtrl', function ($scope, DTOptionsBuilder, DTColumnBuilder, $filter) { 

    $scope.view = ''; 
    $scope.update = ''; 
    $scope.delete = ''; 

    $scope.$watch(
     function() { return $filter('translate')('ACTIONS.VIEW'); }, 
     function(newval) { $scope.view = newval; console.log(newval); } 
    ); 

    $scope.$watch(
     function() { return $filter('translate')('ACTIONS.UPDATE'); }, 
     function(newval) { $scope.update = newval } 
    ); 

    $scope.$watch(
     function() { return $filter('translate')('ACTIONS.DELETE'); }, 
     function(newval) { $scope.delete = newval } 
    ); 

    // deleted code 
     .renderWith(function(data, type, full, meta) { 
      if (true) { 
      return '<button class="btn btn-blue btn-primary btn-ef btn-ef-5 btn-ef-5b mb-10"><i class="fa fa-trash"></i> <span>'+$scope.view+'</span></button>&nbsp;' 
       + '<button class="btn btn-bl btn-success btn-ef btn-ef-5 btn-ef-5b mb-10"><i class="fa fa-trash"></i> <span>'+$scope.update+'</span></button>&nbsp;' 
       + '<button class="btn btn-danger btn-rounded btn-ef btn-ef-5 btn-ef-5b mb-10"><i class="fa fa-trash"></i> <span>'+$scope.delete+'</span></button>'; 
      } else { 
      return ''; 
      } 

     }) 
    ]; 
    }); 

$watch работает нормально, как вы можете видеть на моем коде есть console.log(newval), который регистрирует новый перевод, но $ scope.view, $ scope.update и $ scopte.delete не переводится после изменения языка, поэтому мне нужно обновить мою страницу, чтобы увидеть новый перевод.

Как я могу это решить?

, как вы можете видеть, код, который я написал, очень уродлив, если вы знаете какой-то другой способ, я буду благодарен.

Edit:

Я пытался использовать $translateChangeSuccess событие вместо $watch следующим образом:

.controller('CandidaturesDatatableCtrl', function ($scope, DTOptionsBuilder, DTColumnBuilder, $filter, $rootScope, $translate) { 

    $scope.view = $filter('translate')('ACTIONS.VIEW'); 
    $scope.update = $filter('translate')('ACTIONS.UPDATE'); 
    $scope.delete = $filter('translate')('ACTIONS.DELETE'); 

    $rootScope.$on('$translateChangeSuccess', function() { 
     $translate(['ACTIONS.VIEW','ACTIONS.UPDATE','ACTIONS.DELETE']).then(function (newval) { 
     console.log(newval); 
     $scope.view = newval['ACTIONS.VIEW']; 
     $scope.update = newval['ACTIONS.UPDATE']; 
     $scope.delete = newval['ACTIONS.DELETE']; 
     }); 
    }); 
//... 
     DTColumnBuilder.newColumn(null).withTitle('Actions').notSortable() 
     .renderWith(function(data, type, full, meta) { 
      if (true) { 
      return '<button class="btn btn-blue btn-primary btn-ef btn-ef-5 btn-ef-5b mb-10"><i class="fa fa-trash"></i> <span>'+$scope.view+'</span></button>&nbsp;' 
       + '<button class="btn btn-bl btn-success btn-ef btn-ef-5 btn-ef-5b mb-10"><i class="fa fa-trash"></i> <span>'+$scope.update+'</span></button>&nbsp;' 
       + '<button class="btn btn-danger btn-rounded btn-ef btn-ef-5 btn-ef-5b mb-10"><i class="fa fa-trash"></i> <span>'+$scope.delete+'</span></button>'; 
      } else { 
      return ''; 
      } 

     }) 
    ]; 
    }); 

Но это не сработало, я получил такое же поведение, как при использовании $watch.

Чтобы увидеть, как работает мой код, это состояние страницы, когда я загрузить его:

enter image description here

предыдущая страница на французском, а затем, когда я изменить его на английском языке:

enter image description here

, как вы можете увидеть все метки получили переведены на английский язык, кроме Afficher, Modifier и Supprimer, которые я перевожу в Controlle r, и вы можете заметить журнал в консоли, что означает, что $translateChangeSuccess работал, но он не мог изменить значения в представлении.

+1

вы используете угловой перевод ? если да, посмотрите на услугу $ translate. https://angular-translate.github.io/docs/#/guide/03_using-translate-service – sdfacre

+0

@sdfacre да Я уже прочитал эту статью, мой вопрос не касался того, как использовать $ translate, поскольку я сказал, что это работает, но Я должен обновить веб-страницу в моем случае, чтобы увидеть эффекты. –

ответ

1

не очень хотелось, чтобы эти наблюдатели .... Вы действительно можете слушать некоторые события, то есть $ translateChangeSuccess

вот plunker: http://plnkr.co/edit/njVZQ2plsXK95JvuxP1J?p=preview

$rootScope.$on('$translateChangeSuccess', function(){ 
    $translate(['ACTIONS.VIEW', 'ACTIONS.UPDATE']).then(function (result) { 
    $scope.view = result['ACTIONS.VIEW']; 
    $scope.update= result['ACTIONS.UPDATE']; 
    }); 
}); 
+0

Спасибо за вашу помощь, но я боюсь сказать, что это не сработало, пожалуйста, проверьте мое последнее изменение для получения более подробной информации. –

+0

Извините, только что поняли, что кнопки были фактически отображены с использованием строки. зачем ты это сделал? разве нет Углового способа сделать это? Если вы не можете изменить кнопки, вероятно, попробуйте переместить конфигурацию кнопки в преобразователь $ translate, чтобы вы повторно отображали кнопки после изменения языка. – sdfacre

+0

Я использую угловые данные, которые и единственный способ добавить столбец к нему с помощью html-кода - это визуализировать этот html, извините, но я не знаю, как переместить этот HTML-код в преобразователь $ translate –

Смежные вопросы