我想访问一个JS文件中提供的enTranslations如下所示,但我不能够访问它
正如你可以看到我的HTML我想根据我的当前区域设置我的数据,我有自定义翻译文件enTranslation,这是给出的。
问题:
当我使用
{{ translations[key] }}
或{{ translation.key }}
时,我无法在浏览器页面上看到这些值
请帮助我了解做这项工作需要做些什么。
我有js目录中的3个文件,下面给出的代码:
- enTranslations.js
- prax_controller.js
- 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。