Question

正如您在我的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

Answer 1

您可以在$rootScope上附加翻译，然后您就可以在任何模板中获取该对象。根据您的要求记住的粗略图片可能就是这样。

将它放在主角度自举模块的run方法中，或者你可以将它放在第一个控制器的解析方法中。

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>

Answer 2

问题是你的Angular控制器对你的enTranslations.js文件一无所知。一个稍微不那么重要的问题是，您应该将ng-repeat放在li而不是ul上。

Here's a codepen that works

如果您想要使用把手{{ translations }}访问某些内容，则需要在控制器中拥有相应的$scope.translations对象。

只需在控制器中创建该对象即可解决问题。

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

现在可以理解的是，你不想把它放在每个控制器中。您可以创建一个JSON对象，将其保存在服务器上并使用Angular的$http服务访问它，或者您可以通过$rootScope或constants创建一些全局变量app config。

我想访问一个JS文件中提供的enTranslations，如下所示，但我无法访问它

1. enTranslations.js

2. prax_controller.js

3. Angular.min.js

2 个答案: