为什么语言没有在角度js中翻译

时间:2017-04-06 10:53:59

标签: javascript angularjs

(function() {
  angular.module("MetronicApp").controller("deviceViewController",deviceViewController)

  .factory("asyncLoader", asyncLoader)
  .config(config);


  //@config
  config.$inject = [ '$translateProvider' ];

  function config($translateProvider) {
//      $translateProvider.translations("ci", Language_ci);
//      $translateProvider.translations("en", Language_en);
//      $translateProvider.translations("hi", Language_hi);
//      $translateProvider.translations("sp", Language_sp);
      $translateProvider.preferredLanguage('en');
//      $translateProvider.translations('ci', {
//          DeviceId: '设备ID',
//          TimeStamp:'时间戳'
//      });

      $translateProvider.useLoader('asyncLoader');
   // $translateProvider.useLocalStorage();

    var langMap = {
      'en_AU': 'en',
      'en_CA': 'en',
      'en_NZ': 'en',
      'en_PH': 'en',
      'en_UK': 'en',
      'en_US': 'en',
      'ja_JP': 'ja',
      'en_hi': 'hi',
      'en_ci': 'ci',
      'en_ch': 'ci'
    };

    $translateProvider
    .registerAvailableLanguageKeys(['en', 'sp', 'hi', 'ci'], langMap)

    .determinePreferredLanguage();
    /*console.log($translateProvider.
    .determinePreferredLanguage());*/
                                //window.navigator.languages[0]
  }

  // @factory
  asyncLoader.$inject = [ '$q', '$timeout', '$http' ];
  function asyncLoader($q, $timeout, $http) {

    return function(options) {
      var deferred = $q.defer(), translations;

      var resturl = "lang"+options.key+".json";
      $http.get(
        resturl,{cache:false}).success(function(translations) {
          deferred.resolve(translations);
            //alert(translations);
          }).error(function(translations) {
            deferred.reject(translations);
          });

          $timeout(function() {
            deferred.resolve(translations);
          }, 2000);

          return deferred.promise;
        };

      }

  //@controller
  deviceViewController.$inject = [ '$translate', '$scope','$rootScope','$state'];

  function deviceViewController($translate, $scope,$rootScope,$state) {
    $scope.defaultlanguage = true;
    $scope.state= $state;


          $scope.SetLang = function(langkey) {
          var key = localStorage.getItem("Selected_Language");

              if (langkey === 'ci') {
              alert("Selected Key form Single Device View is " + langkey);
              $rootScope.lang = "ci";
              $scope.defaultlanguage = true;
              //changeLanguageFeedbackPanel(key);
                $translate.use(langkey);
              //  alert("Language Setted");
             }

             if (langkey === 'en') {
              alert("Selected Key form Single Device View is " + langkey);
              $rootScope.lang = "en";
              $scope.defaultlanguage = false;
              //changeLanguageFeedbackPanel(key);
              $translate.use(langkey);
            }

            if (langkey === 'hi') {
              alert("Selected Key form Single Device View is " + langkey);
              // alert("lang key is "+langKey);
              $rootScope.lang = "hi";
              $scope.defaultlanguage = false;
              $translate.use(langkey);

           }
          if (langkey === 'sp') {
              alert("Selected Key form Single Device View is " + langkey);
              $rootScope.lang = "sp";
              $scope.defaultlanguage = false;
             $translate.use(langkey);
          }
//          $translate.use(langkey);
      }
//      $scope.changeLanguage = function(langKey) {
//
//          if(langKey === 'en')
//          {
//              $rootScope.lang= "en";
//              $scope.defaultlanguage = true;
//              //changeLanguageFeedbackPanel(langKey);
//          }
//          if(langKey === 'sp')
//          {
//              //alert("clicked Spanish");
//              $rootScope.lang= "sp";
//              $scope.defaultlanguage = false;
//              //changeLanguageFeedbackPanel(langKey);
//          }
//          if(langKey === 'hi')
//          {
//              // alert("lang key is "+langKey);
//              $rootScope.lang= "hi";
//              $scope.defaultlanguage = false;
//          }
//          if(langKey === 'ci')
//          {
//              $rootScope.lang= "ci";
//              $scope.defaultlanguage = false;
//
//          }
//
//          $translate.use(langKey);
//      };
//

//      var key= localStorage.getItem("key");
////        $scope.SetLang= function (Key) {
//
//      if (key === 'ci') {
//          alert("Selected Key from Single Device View is " + Key);
//          $rootScope.lang = "ci";
//          $scope.defaultlanguage = true;
//          //changeLanguageFeedbackPanel(langKey);
//          $translate.use(key);
//      }
//
//      if (Key === 'en') {
//          alert("Selected Key from Single Device View is " + Key);
//          $rootScope.lang = "en";
//          $scope.defaultlanguage = true;
//          //changeLanguageFeedbackPanel(langKey);
//          $translate.use(key);
//      }
//      if (Key === 'hi') {
//          alert("Selected Key form Single Device View is " + Key);
//          // alert("lang key is "+langKey);
//          $rootScope.lang = "hi";
//          $scope.defaultlanguage = true;
//          $translate.use(key);
//
//      }
//      if (Key === 'sp') {
//          alert("Selected Key form Single Device View is " + Key);
//          $rootScope.lang = "sp";
//          $scope.defaultlanguage = true;
//          $translate.use(key);
//      }

      $scope.device_data=[
          {"deviceId":"temperature","timeStamp":"temperature","paramName":"temperature","paramValue":"151","paramUom":"Off Device"},
          {"deviceId":"temperature","timeStamp":"temperature","paramName":"temperature","paramValue":"151","paramUom":"Off Device"},
          {"deviceId":"temperature","timeStamp":"temperature","paramName":"temperature","paramValue":"151","paramUom":"Off Device"}
      ];

//    $scope.changeLanguage = function(langKey) {
//
//      if(langKey === 'en')
//      {
//        $rootScope.lang= "en";
//        $scope.defaultlanguage = true;
//          //changeLanguageFeedbackPanel(langKey);
//        }
//        if(langKey === 'sp')
//        {
//          //alert("clicked Spanish");
//          $rootScope.lang= "sp";
//          $scope.defaultlanguage = false;
//          //changeLanguageFeedbackPanel(langKey);
//        }
//        if(langKey === 'hi')
//        {
//          // alert("lang key is "+langKey);
//           $rootScope.lang= "hi";
//           $scope.defaultlanguage = false;
//        }
//        if(langKey === 'ci')
//        {
//          $rootScope.lang= "ci";
//          $scope.defaultlanguage = false;
//
//        }
//
//        $translate.use(langKey);
//      };
//
      $scope.Action=function()
      {
          alert("Action Clicked Successfully");
      }

      // On Click Action starts here
      $scope.doAction= function () {
          // body to perform action...

          alert("Action taken Successfully");
      }
}//Controller Ended

  })();

这是我的JS文件。我已经为单页编写了代码。它适用于单页,但当我尝试为整个主题做,这是行不通的。它无法翻译语言。

请告诉我错误?

 <ul class="dropdown-menu dropdown-menu-default">
                    <li>
                        <a href="">
                        <img alt="" src="../assets/global/img/flags/ci.png"><button onclick="SetLang('ci')">Chinese</button>
                            </a>
                    </li>
                    <li>
                        <a href="">
                 <img alt="" src="../assets/global/img/flags/us.png"><button onclick="SetLang('en')">English</button>
                        </a>
                    </li>
                     <li>
                        <a href="">
                        <img alt="" src="../assets/global/img/flags/hu.png"><button onclick="SetLang('hi')"> Hindi </button>
                            </a>
                    </li>
                    <li>
                        <a href="">
                       <img alt="" src="../assets/global/img/flags/us.png"><button onclick="SetLang('sp')">Spanish</button>
                            </a>
                    </li>
                </ul>
        </li>  

          <script type="text/javascript">

              function SetLang(langkey)
              {
                  alert("Language Changed To " +langkey);
                  localStorage.setItem("Selected_Language",langkey);


              }

1 个答案:

答案 0 :(得分:0)

我的工作代码就是这个。

(function() {
    'use strict';

    angular
        .module('app.translate')
        .run(translateRun)


    translateRun.$inject = ['$rootScope', '$translate'];
    function translateRun($rootScope, $translate){
      $rootScope.language = {
        listIsOpen: false,
        available: {
          'en': 'English',
          'es': 'Español',
          'de': 'Deutsch',
          'fr': 'Français',
          'ru': 'Русский',
          'ua': 'Українська'
        },
        init: function () {
          var proposedLanguage = $translate.proposedLanguage() || $translate.use();
          var preferredLanguage = $translate.preferredLanguage();
          $rootScope.language.selected = $rootScope.language.available[ (proposedLanguage || preferredLanguage) ];
        },
        set: function (localeId) {
          $translate.use(localeId);
          $rootScope.language.selected = $rootScope.language.available[localeId];
          $rootScope.language.listIsOpen = ! $rootScope.language.listIsOpen;
        }
      };
      $rootScope.language.init(); 
    }
})();

HTML内容:

<li class="menumain" is-open="language.listIsOpen">
    <a class="">
      <em class="fa-globe fa fa-2x"></em>
    </a>
 <ul role="menu" class="menumain-sub">
    <li ng-repeat="(localeId, langName) in language.available">
        <a ng-click="language.set(localeId, $event)" href="#">{{langName}}</a>
    </li>
 </ul>
</li>
相关问题