如何加載JSON數組以翻譯AngularJS網頁與角度翻譯

Question

我仍然在學習AngularJS嚴重，所以請原諒我所有質量差的代碼/缺乏知識。

我想做

我想我的網頁翻譯成2種語言的內容。目前，當我使用角度翻譯在index.html中翻譯靜態內容時，它工作正常。像這樣

function translateConfiguration($translateProvider) { 

    $translateProvider.useSanitizeValueStrategy(null); 

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

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

};因爲它應該

我打開我的簡單JSON文件爲EN和RU語言環境，結構類似這樣的

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

然後，我通過訪問變量角轉換指令

<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' 
    }; 
    }; 
})(); 

這裏是控制器

(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維基頁面，但所有例子都只有index.html和主要應用程序。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'); 

語言前綴將被自動添加到路徑。