我想访问一个JS文件中提供的enTranslations如下所示,但我不能够访问它

正如你可以看到我的HTML我想根据我的当前区域设置我的数据,我有自定义翻译文件enTranslation,这是给出的。

问题:

当我使用{{ translations[key] }}{{ translation.key }}时,我无法在浏览器页面上看到这些值

请帮助我了解做这项工作需要做些什么。

我有js目录中的3个文件,下面给出的代码:

  1. enTranslations.js
  2. prax_controller.js
  3. angular_1.4.2.min.js

我的HTML文件

 <!DOCTYPE html> <html> <head> <script src="js/angular_1.4.2.min.js"></script> <script src="js/prax_controller.js"></script> <script src="js/enTranslations.js"></script> <meta charset="UTF-8"> <title>Prax Local</title> </head> <body ng-app="prxApp" ng-controller="prxController"> <div> List <ul class="d1" ng-repeat="(key, value) in eventHistories"> <li class="d1k"> <!-- {{ translations.key }}: {{ value }}% --> {{ translations[key] }} : {{ value }}% </li> </ul> </div> </body> </html> 

1. enTranslations.js

 var translations = { "Device Status":'Device Status', "Device Temperature":'Device Temperature', }; 

2. prax_controller.js

 var prxApp = angular.module('prxApp', []); prxApp.controller('prxController', ['$scope', function($scope) { $scope.init = function() { $scope.eventHistories = { "Device Status":0, "Device Temperature":0, }; }; $scope.init(); }]); 

3. Angular.min.js

https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js

你可以附加在$rootScope的翻译,那么你将能够获得在任何模板的对象。 根据您的要求,可能会出现一个粗略的图片。

把它放在你的主引导模块的run方法的某个地方,或者你可以把它放在你的第一个控制器的parsing方法中。

 angular.module('app').config(function () { }) .run(function ($rootScope, $state, $stateParams, $http) { // Get language based on browser settings var lang = navigator.language; // fetch translations from server $http.get('URL_TO_FETCH_TRANSLATION/' + lang) .success(function (data) { $rootScope.translations = data; }); }); 

在你的任何模板。

 <li class="d1k" ng-repeat="(key, value) in eventHistories"> {{ translations[key] }} : {{ value }} </li> 

问题是你的Angular控制器不知道你的enTranslations.js文件。 一个稍微不重要的问题是你应该把ng-repeat放在li而不是ul

这是一个工作的codepen

如果你想用handlebars {{ translations }}来访问某个东西,那么它需要在你的控制器中有一个相应的$scope.translations对象。

在控制器中简单创build该对象将解决您的问题。

 $scope.translations = { "Device Status": 'Device Status', ... } 

现在可以理解,你不想把这个放在每个控制器中。 您可以创build一个JSON对象,将其保存在服务器的某个地方,并使用Angular的$http服务访问它,也可以通过$rootScope或通过应用程序configuration中的常量创build一些全局variables。