我如何检测 angular-translate 文件是否已加载

Question

我正在尝试在我的 angular 应用程序中使用一次性绑定来提高性能。所以我想使用下一种方式的angular-翻译：

//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>

如何检测语言 json 文件何时加载？我不想使用 setTimeouts。

希望你能理解我

谢谢！

Answer 1

以下代码片段来自docs

app.controller('Ctrl', ['$scope', '$translate', function ($scope, $translate) {
  $translate('HEADLINE').then(function (headline) {
    $scope.headline = headline;
  });
  $translate('PARAGRAPH').then(function (paragraph) {
    $scope.paragraph = paragraph;
  });
  $translate('NAMESPACE.PARAGRAPH').then(function (anotherOne) {
    $scope.namespaced_paragraph = anotherOne;
  });
}]);

在您的情况下，应该这样做。

function myCtrl($scope, $translate){
    $translate('DESCRIPTION').then(function (description) {
         $scope.DESCRIPTION = description;
    });
}

尽管如此，我认为使用 Angular-Translate 的最简单方法是像这样使用过滤器。 (docs)

<p>{{'DESCRIPTION' | translate}}</p>

Answer 2

如果你需要在你的控制器中翻译一个字符串，而不是注入服务，你应该直接注入过滤器...

在 angular 1.+ 中，您可以使用 Filter suffix.

注入过滤器

function MyCtrl(translateFilter) { console.log(translateFilter('mystring')); }

这应该可以让您安全地加载所有过滤器依赖项。

Answer 3

检查这个解决方案：

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>

我如何检测 angular-translate 文件是否已加载

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

javascript

angularjs

angular-translate