如何在javascript弹出警报上显示angularjs翻译结果

时间:2015-05-05 03:35:54

标签: javascript jquery angularjs

当我想在javascript警告弹出窗口中显示翻译结果时,我正在使用AngularJS翻译并遇到问题。谁能告诉我怎么做呢?谢谢。 这是我的angularjs翻译脚本:

<script>
angular.module('app',['pascalprecht.translate'])
    .config(function($translateProvider){
         $translateProvider.translations('chs',{
         "Name" : "名字",
         "Address" : "地址"

         });
         $translateProvider.translations('esp',{
         "Name" : "Как пользоваться",
         "Address" : "dirección"

         });
          $translateProvider.preferredLanguage('chs');
    })
    .controller('TranslateController', function($translate, $scope) {

            $scope.changeLanguage = function (langKey) {
            $translate.use(langKey);
        };
    });

我希望显示javascript的转换结果

var getLang = function()
        { alert (); // translation result from angularjs}

这里是html上的所有代码:

 <html ng-app='app'>

    <head>
    <meta charset="utf-8">
  <title translate="TITLE">Basic usage</title>
  <style>body { text-align: center; }</style>
        <script src="Scripts/jquery-2.1.3.js" type="text/javascript"></script>
        <script>

             var getLang = function()
            { alert (); // how to alert translation result from angularjs}

        </script>

    </head>
<body>
<div id="result"></div>
<div id="timeResult"></div>

<table>
<tr>
<td>{{'Name' | translate}} : </td> 
<td></td>
</tr>
<tr>
<td>{{'Address' | translate}} : </td> 
<td><input type="button" value="test" onClick="getLang()"/></td>
</tr>

</table>
<script src="Scripts/angular.js" type="text/javascript"></script>
<script src="Scripts/angular-translate.js" type="text/javascript"></script>
<script>
    angular.module('app',['pascalprecht.translate'])
        .config(function($translateProvider){
             $translateProvider.translations('chs',{
             "Name" : "名字",
             "Address" : "地址"

             });
             $translateProvider.translations('esp',{
             "Name" : "Как пользоваться",
             "Address" : "dirección"

             });
              $translateProvider.preferredLanguage('chs');
        });

</script>


</body>
</html>

由于

1 个答案:

答案 0 :(得分:1)

肯定缺少一些东西。首先,您需要将按钮绑定到某个控制器,以便Angular知道它必须执行某些操作。定义控制器后,您可能需要注入翻译提供程序,然后您就可以获得翻译的名称和地址。

完整代码示例:

<html ng-app='app'>
    <head>
        <meta charset="utf-8">
      <title translate="TITLE">Basic usage</title>
      <style>body { text-align: center; }</style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

    </head>

<body ng-controller="TranslateController">
    <div id="result"></div>
    <div id="timeResult"></div>

    <table>
        <tr>
        <td>Name: {{'Name' | translate}} : </td> 
        <td></td>
        </tr>
        <tr>
        <td>Address: {{'Address' | translate}} : </td> 
        <td><input type="button" value="Get Preferred Language Translation" ng-click="getLang()"/></td>
        </tr>

    </table>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.7.0/angular-translate.min.js" type="text/javascript"></script>
    <script>
        angular.module('app',['pascalprecht.translate'])
            .config(function($translateProvider){
                 $translateProvider.translations('chs',{
                 "Name" : "名字",
                 "Address" : "地址"

                 });
                 $translateProvider.translations('esp',{
                 "Name" : "Как пользоваться",
                 "Address" : "dirección"

                 });
                 $translateProvider.preferredLanguage('chs');
            })
            .controller('TranslateController', function($scope, $translate) {
                $scope.getLang = function()
                {
                    $translate(['Name', 'Address']).then(function (translations) {
                        alert('Name is:' + translations.Name + ' Address is: ' +  translations.Address);
                    });

                }

            });

    </script>

    </body>
</html>