zoukankan      html  css  js  c++  java
  • ionic phonegap translate language demo

    中英文转换,经常用到;而ionic  则是通过angular js 来实现;

    用到了 http://www.ng-newsletter.com/posts/angular-translate.html 中的angular-translate.min.js 让translate language  变得很简单...

    1. 在index.html 中引用 angular-translate.min.js 

        <script src="js/angular-translate.min.js"></script>

    2. 在app.js 中  .config 路由器的下面加入 一下代码

     1  $translateProvider.translations('en', {
     2     TITLE: 'Hello',
     3     FOO: 'This is a paragraph.',
     4     BUTTON_LANG_EN: 'english',
     5     BUTTON_LANG_DE: 'german',
     6 
     7     // 左边菜单
     8     mainside:'mainpage',
     9     aboutusside:'About Us',
    10     settingside:'Setting',
    11     tncside:'T&C',
    12     // 登录页面
    13     login_info:'login',
    14     login_sub:'login',
    15     login_register:'register',
    16     login_forgetpsw:'forget password',
    17     login_placeholderemail:'email',
    18     login_placeholderpassword:'password',
    19     // 注册页面
    20     register_info:'register',
    21     register_sub:'register'
    22   });
    23   $translateProvider.translations('zh', {
    24     TITLE: 'Hallo',
    25     FOO: 'Dies ist ein Paragraph.',
    26     BUTTON_LANG_EN: 'englisch',
    27     BUTTON_LANG_DE: 'deutsch',
    28     mainside:'主页面',
    29     aboutusside:'关于我们',
    30     settingside:'设置',
    31     tncside:'条款',
    32      // 登录页面
    33     login_info:'登录',
    34     login_sub:'登录',
    35     login_register:'注册',
    36     login_forgetpsw:'忘记密码',
    37     login_placeholderemail:'电邮',
    38     login_placeholderpassword:'密码',
    39         // 注册页面
    40     register_info:'注册',
    41     register_sub:'注册'
    42   });
    43   $translateProvider.preferredLanguage('en');
    View Code

    3. 在controllers.js 中写下页面需要控制器控制转换语言的控制, 而我则在这个页面都转换 故有了以下的代码

    angular.module('starter.controllers', [])
    
    .controller('AppCtrl', function($scope, $ionicModal, $timeout,$translate) {
      $scope.changeLanguage = function (key) {
        $translate.use(key);
      };
    })
    View Code

    4. 就是在页面中调用 了  

    {{“sometext” |translate}}

    4.1) 普通的标签 如下

    <button class="button button-block button-positive" translate="login_sub">
          Submit
        </button>
     <p translate="login_info">login</p>

    4.2)input标签中的placeholder 则是如下

     <input type="text" placeholder="{{ 'login_placeholderemail' | translate }}">

    Download

    // 2014-09-24 11:39:26

    我发现了一个更好的方法来处理这个问题的博客

    如果需要可以看这个博客 你会发现更好,更简单的方法 哈哈

  • 相关阅读:
    57. Insert Interval
    56. Merge Intervals
    55. Jump Game
    54. Spiral Matrix
    53.Maximum Subarray
    窗口左上角添加图标
    点击Qtableview表头,触发事件
    变参数的宏
    用互斥锁实现程序只能有一个实例
    Visual Studio 2015 + Windows 2012 R2, c++/cli Array::Sort() 抛出异常
  • 原文地址:https://www.cnblogs.com/xieyier/p/3980846.html
Copyright © 2011-2022 走看看