javascript - 如何加载 JSON 数组以使用 Angular-Translate 翻译 AngularJS 网页

Question

我仍在大量学习 AngularJS，所以请原谅我所有质量低劣的代码/缺乏知识。

我想做什么

我想将我的网页翻译成 2 种语言。当我在 index.html 中使用 Angular-Translate 翻译静态内容时，它目前有效。像这样

function translateConfiguration($translateProvider) {

    $translateProvider.useSanitizeValueStrategy(null);

    $translateProvider.useStaticFilesLoader({
      files: [{
        prefix: '../JSON/locale-',
        suffix: '.json'
      }]
});

$translateProvider.preferredLanguage('en');
$translateProvider.fallbackLanguage('en');

};

我为 EN 和 RU 语言环境加载我的简单 JSON 文件，结构如下

{
 "HEADING" : "Lorem",
 "TEXT" : "Ipsum"
}

然后我通过 Angular-translate 指令访问变量

<h1 class="z-logo header-text md-display-1" translate="HEADING">
</h1>

一切正常。

我希望能够对我的自定义指令和 ng-repeat 执行相同的操作。

问题

我的 AngularJS 网站中有多个自定义指令。例如

<about-card flex="33" flex-xs="100" flex-sm="100" class="center-content" ng-repeat="data in aboutCardCtrl.info">
</about-card>

这是通过自定义指令加载并从 JSON 文件中检索信息的模板代码

<md-card class="card-bg card-height">
  <md-card-title layout="column" class="about-card">
    <md-card-title-media class="center-elements">
      <img class="md-media-lg" ng-src="{{data.image}}" alt="{{data.imageAlt}}"/>
    </md-card-title-media>
    <md-card-title-text>
      <div class="md-headline card-title-padding">{{data.heading}}</div>
    </md-card-title-text>
  </md-card-title>
  <md-card-content>
    {{data.content | translate}}
  </md-card-content>
</md-card>

这是指令

(function() {
  'use strict'

  angular
    .module('webApp')
    .directive('aboutCard', aboutCard);

  function aboutCard() {
    return {
      restrict: 'EA',
      priority: 1001,
      templateUrl: '../TEMPLATES/about.html',
      controller: 'aboutCardController',
      controllerAs: 'aboutCardCtrl'
    };
  };
})();

这是 Controller

(function() {
  'use strict'

  angular
    .module('webApp')
    .controller('aboutCardController', aboutCardController);

  aboutCardController.$inject = ['JsonData', '$translate'];

  function aboutCardController(JsonData, $translate) {
    var vm = this;

    vm.pathToJson = '../JSON/about-en.json';
    vm.info = [];

    JsonData.all(vm.pathToJson).then(function(response) {
      vm.info = response.data.information;
    });
  };
})();

这是JSON文件

  {
      "information": [{
        "heading": "Reliability",
        "content": "Our partners have been working on the market for over 10 years",
        "image": "../IMG/shield.svg",
        "imageAlt": "Reliability Image"
      }, {
        "heading": "Professionalism",
        "content": "We are ready to provide profesional opinion for our clients to ensure the right choice",
        "image": "../IMG/people.svg",
        "imageAlt": "Professionalism Image"
      }, {
        "heading": "Development",
        "content": "Organization of educational programs in collaboration with our partners",
        "image": "../IMG/cogwheel.svg",
        "imageAlt": "Development Image"
      }]
    }

在这里，我想我缺乏理解如何加载我的 JSON 文件并在自定义指令中使用 ng-repeat 在它们之间切换的脑力。由于JSON的格式不同。

我一直在浏览 Angular-Translate wiki 页面，但所有示例都只有 index.html 和主要的 app.js 文件，我似乎几乎无法查找/理解在谷歌搜索中找到的示例，例如这些

https://technpol.wordpress.com/2013/11/02/adding-translation-using-angular-translate-to-an-angularjs-app/

https://github.com/angular-translate/angular-translate/issues/1154

Answer 1

您可以使用动态加载器代替静态加载器。

$translateProvider.useLoader('$translatePartialLoader', {
  urlTemplate: 'JSON/{part}/{lang}.json'
});

然后像这样加载您需要的 JSON:

$translatePartialLoader.addPart('about');

语言前缀将自动添加到路径中。