Javascript 我想访问一个JS文件中提供的夹带，如下所示，但我无法访问它_Javascript_Jquery_Angularjs_Node.js_Web

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

javascript jquery angularjs node.js web

Javascript 我想访问一个JS文件中提供的夹带，如下所示，但我无法访问它,javascript,jquery,angularjs,node.js,web,Javascript,Jquery,Angularjs,Node.js,Web,正如您在我的HTML中所看到的，我希望根据我当前的语言环境获取数据，并且我有自定义的翻译文件夹带，这是给定的问题: 我无法看到浏览器页面上的值，当我使用{{translations[key]}或{{translation.key}} 请帮助我了解需要做什么才能使这项工作顺利进行我在js目录中有3个文件，代码如下： entransations.js prax_controller.js 角度_1.4.2.min.js 我的HTML文件 <!DOCTYPE html> <ht

正如您在我的HTML中所看到的，我希望根据我当前的语言环境获取数据，并且我有自定义的翻译文件夹带，这是给定的

问题:

我无法看到浏览器页面上的值，当我使用

{{translations[key]}

或

{{translation.key}}

请帮助我了解需要做什么才能使这项工作顺利进行

我在js目录中有3个文件，代码如下：

entransations.js

prax_controller.js

角度_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>

2.prax_controller.js 3.Angular.min.js

问题是您的Angular controller对您的entransations.js文件一无所知。一个稍不重要的问题是，您应该将

ng repeat

放在

li

上，而不是

ul

上

如果您想使用手柄

{{translations}}

访问某个对象，那么它需要在控制器中具有相应的

$scope.translations

对象

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

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

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

现在可以理解的是，你不想把它放在每个控制器上。您可以创建一个JSON对象，将其保存在服务器上的某个位置，并使用Angular的

$http

服务访问它，或者您可以通过

$rootScope

或通过应用程序配置创建一些全局对象

您可以将翻译附加到

$rootScope

上，然后就可以在任何模板中获取对象。根据您的要求，脑海中浮现的大致情况可能是这样的

把它放在主角度引导模块的run方法中，也可以放在第一个控制器的resolve方法中

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>


{{translations[key]}}:{{value}

你能不能创建一个thisHi Azium的plunker，谢谢你的回答，我正在根据区域设置加载翻译对象，Enransation和keTranslations是不同的语言文件，其中包含翻译对象，将根据区域设置加载。如何将它们附加到$scope.translations={…}中？

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