Угловой-переводить неизвестный $ translateProviderProvider

Question

Угловой-переводить неизвестный $ translateProviderProvider

0

это мой сценарий: у меня есть Ионный проект, и я бы использовал угловой перевод для интернационализации. Поэтому я включил angular-translate.min.js:

<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/angular-translate.min.js"></script>
<script src="js/app.js"></script>
<script src="cordova.js"></script>

Это часть тела:

<body ng-app="todo" ng-controller="TodoCtrl">
    <ion-side-menus>
        <!-- Center content -->
        <ion-side-menu-content>
            <a href="#chooseBtn" class="button button-icon">
                <i class="icon ion-ios-help-outline "></i>
            </a>
            <h1 class="title" ng-click="test(activeProject.tasks.length)" translate="TITLE">Tap to choose!</h1>
...

И это часть моего файла app.js:

var app = angular.module('todo', ['ionic', 'pascalprecht.translate']).config(['$translateProvider', function ($translateProvider) {
    $translateProvider.translations('en', {
        TITLE: "Tap here to choose!"
    });
    $translateProvider.translations('it', {
        TITLE: "Tocca qui per scegliere!"
    });
}]);


app.factory('Projects', function () {
    return {
        ...
    }
});

app.controller('TodoCtrl', function ($scope, $timeout, $ionicModal, Projects, $ionicSideMenuDelegate, $location, $anchorScroll, $ionicScrollDelegate, $ionicPopup, $translateProvider) {
    $scope.ChangeLanguage = function (lang) {
        $translateProvider.use(lang);
    };

    $timeout(function () {
        $scope.ChangeLanguage("it");
    });
});

Когда я запускаю проект, браузер бросает мне это исключение:

Error: [$injector:unpr] Unknown provider: $translateProviderProvider <- $translateProvider <- TodoCtrl
http://errors.angularjs.org/1.4.3/$injector/unpr?p0=%24translateProviderProvider%20%3C-%20%24translateProvider%20%3C-%20TodoCtrl
    at REGEX_STRING_REGEXP (ionic.bundle.js:8895)
    at ionic.bundle.js:13089

Как его решить?

SamDroid 27 авг. 2015, в 11:41

Источник

Теги:

javascript

angularjs

angular-translate

ionic

3 ответа

Ещё вопросы

Ahmed Bouchefra · Answer 1 · 2016-11-08T18-23-00.000Z

Это то, как я использовал угловое преобразование, сначала загрузите его через bower

bower install angular-translate

Затем включите его в index.html

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

Добавьте 'pascalprecht.translate' в список зависимостей приложений

    angular.module('starter', ['ionic','ngCordova','pascalprecht.translate','starter.controllers'])

.config(function($stateProvider, $urlRouterProvider,$translateProvider) {

  var en_translations = {
    app_title : "EasyLight",
    menu_home: "Home",
    menu_about: "About"
  };
  var fr_translations = {
    app_title : "TorcheSimple",
    menu_home: "Principal",
    menu_about: "A Propos"
  };
  $translateProvider
    .translations('en', en_translations)
    .translations('fr',fr_translations)
    .preferredLanguage('en');
  /*
   ....
  */

});

Вы должны использовать $ translateProvider из.config() Из вашего шаблона вы можете использовать переводы с помощью трансляционного фильтра, например

<h1> {{ "app_title" | trasnlate }}</h1>

Nadeem Khoury · Answer 2 · 2015-08-27T11-36-00.000Z

Я использовал Angular translate в своем проекте.

Загрузите угловой перевод с https://github.com/angular-translate/angular-translate
сначала включите <script src="scripts/angular-translate.min.js"></script> в ваш index.html.
создайте свой язык JSON в своем проекте со всеми переменными, которые необходимо перевести. Примечание: каждый язык имеет свой файл. например:

ru.json {"email": "Email"}, ja.json {"email": "電子メール"}
В вашем приложении app.js введите pascalprecht.translate в свой модуль.
В вас app.js add: '$ translateProvider.useStaticFilesLoader({prefix:' app/languages /',//где все мои языковые файлы JSON хранятся в суффиксе:'.json '});
В вас app.js добавьте переводчика $translateProvider.preferredLanguage("en"); $translateProvider.fallbackLanguage("en"); $translateProvider.preferredLanguage("en"); $translateProvider.fallbackLanguage("en");

В $ionicPlatform.ready добавьте этот код, чтобы определить язык, когда устройство готово:

if (typeof navigator.globalization !== "undefined") {
    navigator.globalization.getPreferredLanguage(function (language) {
        var language_list = { "French": "es", "English": "en", "Spanish": "es", "Chinese": "zh", "Japanese": "ja" };
        var language_value = (language.value).split(/[\s,-]+/)[0];

        if (language_list.hasOwnProperty(language_value)) {
            var language_locale = language_list[language_value];
            $translate.use(language_locale).then(function (data) {
                console.log("SUCCESS -> " + data);
            }, function (error) {
                console.log("ERROR -> " + error);
            });
        }
    }, null);
}

По вашему мнению, добавьте:

<div class="list">
  <div class="item item-divider">
    {{"language_settings" | translate}}
  </div>
  <label class="item item-radio">
    <input type="radio" name="group" ng-model="language" value="en" ng-change="setLanguage(language)">
    <div class="item-content">
      English
    </div>
    <i class="radio-icon ion-checkmark"></i>
  </label>
  <label class="item item-radio">
    <input type="radio" name="group" ng-model="language" value="ja" ng-change="setLanguage(language)">
    <div class="item-content">
      日本語
    </div>
    <i class="radio-icon ion-checkmark"></i>
  </label>
</div>

В вашем языке-контроллере добавьте следующее:

app.controller('SettingsController', ['$scope', '$translate', function ($scope, $translate) {
    $scope.getLanguage = function () {
        return $translate.use();
    }
    $scope.language = $scope.getLanguage();
    $scope.setLanguage = function (language_value) {
        $translate.use(language_value).then(function (data) {
            console.log("SUCCESS -> " + data);
        }, function (error) {
            console.log("ERROR -> " + error);
        });


    }
}]);

и все. Если у вас есть вопросы, не стесняйтесь спрашивать меня, ребята.

Приветствия.

SamDroid · Answer 3 · 2015-08-27T09-30-00.000Z

Я решил свою проблему. Я изменился

app.controller('TodoCtrl', function ($scope, $timeout, $ionicModal, Projects, $ionicSideMenuDelegate, $location, $anchorScroll, $ionicScrollDelegate, $ionicPopup, $translateProvider) {

в

app.controller('TodoCtrl', function ($scope, $timeout, $ionicModal, Projects, $ionicSideMenuDelegate, $location, $anchorScroll, $ionicScrollDelegate, $ionicPopup,  $translate) {

(Изменено $ translateProvider на $ translate)