Question

我想用两种语言翻译我的网站/网页，但是当我按按钮更改语言时，什么也没有发生，并且此错误出现在控制台中。

Index.html

<html ng-app='mpdmApp' lang="en">
  <head>
      <base href="/">
    <meta charset="utf-8">

  <script src="assets/js/libs/angular.min.js"></script>
    <script src="assets/js/libs/angular-animate.js"></script>
    <script src="assets/js/libs/angular-sanitize.js"></script>

      <script src="assets/js/libs/angular-messages.min.js"></script>
    <script src="assets/js/libs/angular-aria.js"></script>
    <script src="assets/js/libs/angular-route.js"></script>
    <script src="assets/js/libs/angular-material.min.js"></script>
    <script src="app/app.js"></script>
    <script src="app/app.config.js"></script>

    <script src="app/seafood/seafood.module.js"></script>
    <script src="app/seafood/seafood.component.js"></script>

    <!--scripturi angular translate-->
        <script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate/2.18.1/angular-translate.js"></script>
    <script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-interpolation-messageformat/2.18.1/angular-translate-interpolation-messageformat.js"></script>
    <script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-storage-cookie/2.18.1/angular-translate-storage-cookie.js"></script>
    <script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-storage-local/2.18.1/angular-translate-storage-local.js"></script>
    <script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-loader-url/2.18.1/angular-translate-loader-url.js"></script>
    <script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-loader-static-files/2.18.1/angular-translate-loader-static-files.js"></script>
    <script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-handler-log/2.18.1/angular-translate-handler-log.js"></script>
    <script src="app/script.js"></script>

  </head>

<body class="mp_sc_0">

    <mpdm-menu></mpdm-menu>

    <div ng-controller="MainCtrl">
      <div ng-view class="mpdmView"></div>
    </div>

</body>

app.js

var translationsEN = {
      seafood: 'Seafood',
      grill: 'Grill',
      BUTTON_LANG_DE: 'German',
      BUTTON_LANG_EN: 'English'
    };

    var translationsDE= {
      seafood: 'Preparate peste',
      grill: 'Preparate la gratar',
      BUTTON_LANG_DE: 'Deutsch',
      BUTTON_LANG_EN: 'Englisch'
    };

var mpdmApp = angular.module('mpdmApp', [
  'ngRoute', 'ngAnimate', 'ngSanitize','ngMaterial', 'ngMessages',  'mpdmSeafood', 'mpdmGrill', 'mpdmMeniu', 'pascalprecht.translate'
  ]);

 mpdmApp.config(['$translateProvider', function ($translateProvider) {
      // add translation tables
      $translateProvider.translations('en', translationsEN);
      $translateProvider.translations('de', translationsDE);
      $translateProvider.fallbackLanguage('de');
      $translateProvider.preferredLanguage('en');
    }]);

//----controllerul pentru traduceri
 mpdmApp.controller('MainCtrl', ['$translate', '$scope', function ($translate, $scope) {

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

mainpage.html-在此页面中，我输入了我想翻译的单词。我相信由于控制台中的错误，我无法切换语言。

 <div class="btn1">
   <a href="/seafood" translate="seafood"></a>
    </div>

    <div class="btn2>
    <a href="/grill">{{'grill' | translate}}</a>
      </div>

<button ng-click="changeLanguage('de')" translate="BUTTON_LANG_DE"></button>
 <button ng-click="changeLanguage('en')" translate="BUTTON_LANG_EN"></button>

Answer 1

我使用$translate创建了一个基本示例。目前尚不清楚您面临什么问题，因此请更具体。另外，由于您使用的是ng-view，因此您在哪里定义了$routeProvider配置？

var translationsEN = {
      seafood: 'Seafood',
      grill: 'Grill',
      BUTTON_LANG_DE: 'German',
      BUTTON_LANG_EN: 'English'
    };

    var translationsDE= {
      seafood: 'Preparate peste',
      grill: 'Preparate la gratar',
      BUTTON_LANG_DE: 'Deutsch',
      BUTTON_LANG_EN: 'Englisch'
    };

var mpdmApp = angular.module('mpdmApp', ['pascalprecht.translate']);

 mpdmApp.config(['$translateProvider', function ($translateProvider) {
      // add translation tables
      $translateProvider.translations('en', translationsEN);
      $translateProvider.translations('de', translationsDE);
      $translateProvider.fallbackLanguage('de');
      $translateProvider.preferredLanguage('en');
    }]);

//----controllerul pentru traduceri
 mpdmApp.controller('MainCtrl', ['$translate', '$scope', function ($translate, $scope) {

      $scope.changeLanguage = function (langKey) {
        $translate.use(langKey);
      };
    }]);

<html ng-app='mpdmApp' lang="en">
  <head>
      <base href="/">
    <meta charset="utf-8">

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.4/angular.min.js"></script>


    <!--scripturi angular translate-->
        <script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate/2.18.1/angular-translate.js"></script>
    <script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-interpolation-messageformat/2.18.1/angular-translate-interpolation-messageformat.js"></script>
    <script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-storage-cookie/2.18.1/angular-translate-storage-cookie.js"></script>
    <script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-storage-local/2.18.1/angular-translate-storage-local.js"></script>
    <script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-loader-url/2.18.1/angular-translate-loader-url.js"></script>
    <script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-loader-static-files/2.18.1/angular-translate-loader-static-files.js"></script>
    <script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-handler-log/2.18.1/angular-translate-handler-log.js"></script>
    <script src="app/script.js"></script>

  </head>

<body class="mp_sc_0" ng-controller="MainCtrl">

    <!--<mpdm-menu></mpdm-menu>-->

    <!--<div ng-controller="MainCtrl">
      <div ng-view class="mpdmView"></div>
      
    </div>-->
    
    <div class="btn1">
      <a href="/seafood" translate="seafood">Hello</a>
    </div>

     <div class="btn2">
      <a href="/grill">{{'grill' | translate}}</a>
     </div>

 <button ng-click="changeLanguage('de')" translate="BUTTON_LANG_DE"></button>
 <button ng-click="changeLanguage('en')" translate="BUTTON_LANG_EN"></button>    
 

</body>

Answer 2

app.config.js

mpdmApp.config(function($routeProvider, $locationProvider) {
      $routeProvider
      .when('/', {
          template: '<mpdm-main-page></mpdm-main-page>'
        })
        .when('/seafood', {
          template: '<mpdm-seafood></mpdm-seafood>'
        })
        .when('/contact', {
          template: '<mpdm-contact></mpdm-contact>'
        })
        .when('/desprenoi', {
          template: '<mpdm-desprenoi></mpdm-desprenoi>'
        })
        .when('/multumim', {
          template: '<mpdm-multumim></mpdm-multumim>'
        })
        .when('/grill', {
          template: '<mpdm-grill></mpdm-grill>'
        })
        .when('/meniu', {
          template: '<mpdm-meniu></mpdm-meniu>'
        }).
                when('/notfound', {
          template: '<mpdm-coming-soon></mpdm-coming-soon>'
        }).
        otherwise({redirectTo:'/notfound'});

        $locationProvider.html5Mode(true);

    });

错误：“ [$ controller：ctrlreg] http://errors.angularjs.org/1.7.4/$controller/ctrlreg?p0=AppCtrl”

2 个答案: