角转换未知的$ translateProviderProvider
[英]Angular-translate unknown $translateProviderProvider
问题描述
这是我的场景：我有一个Ionic项目，我将使用angular-translate进行国际化。 因此，我包含了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
怎么解决呢？
3 个解决方案
解决方案1
1 2015-08-27 13:53:32
我在项目中使用了Angular翻译。
- 从https://github.com/angular-translate/angular-translate下载angular-translate
- 首先在index.html中包含
<script src="scripts/angular-translate.min.js"></script>。 在项目中使用所有需要转换的变量创建语言JSON文件。 注意：每种语言都有其特定的文件。 例如：
en.json {“ email”：“ Email”}，ja.json {“ email”：“电子メール”}
在您的app.js中，将
pascalprecht.translate注入模块中。在您的app.js中添加：`$ translateProvider.useStaticFilesLoader（{前缀：'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); }); } }]);
就这样。 如有任何疑问，请随时问我。
干杯。
解决方案2
0 2015-08-27 10:39:25
我解决了自己的问题。 我变了
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）
解决方案3
0 2016-11-08 20:43:05
这就是我使用angular-translate的方式，首先通过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');
/*
....
*/
});
您应该使用.config（）中的$ translateProvider在模板中，您可以将翻译与翻译过滤器配合使用，例如
<h1> {{ "app_title" | trasnlate }}</h1>
Angular-translate 未知的提供者
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.