Question

我有一个主文件和一些部分将包含在主文件中。我正在尝试访问主文件中的翻译内容和部分文件，如下所示

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

部分文件中的翻译内容没有任何闪烁问题，但主文件中添加的内容在初始加载时出现闪烁问题。

如此处所述（https://angular-translate.github.io/docs/#/guide/12_asynchronous-loading）

“FOUC - 未翻译内容的Flash：要解决这个问题，您可以在应用中提供至少一种语言，而无需异步加载。”

$translateProvider.useStaticFilesLoader({
    'prefix': 'locale-',
    'suffix': '.json'
});
$translateProvider.preferredLanguage('en');

我只是遵循上述方法，所以不应该有FOUC.kindly提供一些解决这个的指针。

主文件和partials共享同一个控制器。

更新

在主文件中：

 <h1 translate="HEADLINE"></h1>

上面的代码工作正常，没有闪烁，但下面是闪烁的

   <tabset>
       <tab ng-repeat="tab in tabs" heading="{{tab.title | translate}}" >
              <div class= "tab-content" ng-include="tab.content" >
              </div>
       </tab>
   </tabset>

Answer 1

我在控制器中添加了以下代码，没有更多的闪烁。

     $translate('HEADLINE').then(function (headline) {
            $scope.tabs[0].title = ""+headline;

          }, function (translationId) {
            $scope.tabs[0].title = translationId;
          });

在主要的html中

 <tabset>
   <tab ng-repeat="tab in tabs" heading="{{tab.title}}" >
          <div class= "tab-content" ng-include="tab.content" >
          </div>
   </tab>
 </tabset>

使用角度平移时闪烁的文本

1 个答案: