How can i detect if the angular-translate file was loaded

Question

I am trying to use one-time-binding in my angular application to improve the performance. So I want to use the angular-translate of the next way:

//This code does not work.
function myCtrl($translate){
    $scope.DESCRIPTION = $translate.instant('DESCRIPTION');
}


//I should use a timeout of next way:
//This code does work.
function myCtrl($translate){

   setTimeout(function(){
     $scope.DESCRIPTION = $translate.instant('DESCRIPTION');
   }, 1000);
}

<p> {{::DESCRIPTION}} </p>

How can i detect when the language json file is loaded? I does not want to use setTimeouts.

I hope you understand me

Thanks!

Answer 1

Check this solution:

function loadTexts(scope, ids) {

  $translate.onReady(function() {

    var size = ids.length;

    for (var i = 0; i < size; i++) {
      var id = ids[i];
      scope[id] = $translate.instant(id);
    }

  });
};


function myCtrl($scope){
  loadTexts($scope, ['DESCRIPTION', 'HEADER_TEXT']);
}

<p> {{::HEADER_TEXT}} </p>
<p> {{::DESCRIPTION}} </p>