我仍在努力学习AngularJS,所以请原谅我的糟糕的代码质量和缺乏知识。
我的目标
我想将我的网页翻译成两种语言。当我使用Angular-Translate在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"
}
然后我通过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'
};
};
})();
这里是控制器。
(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和主要的app.js文件,而我几乎无法找到/理解在Google搜索中找到的诸如此类的示例
https://github.com/angular-translate/angular-translate/issues/1154