在 ui-router 配置文件中使用 angular-translate 的 $translate.use()
Using angular-translate's $translate.use() in the ui-router config file
我正在尝试在我的ui路由器配置文件路由中使用$translate.use(.js所以我可以用状态切换切换语言,但我得到一个
未捕获错误: [$injector:modulerr] 由于以下原因,无法实例化模块前端应用程序:错误: [$injector:unpr] 未知提供程序: $translate
这是我的文件。
'use strict';
(function() {
angular.module('frontApp')
.run(['$rootScope', '$state', '$stateParams', function($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}]
)
.config(['$urlRouterProvider', '$stateProvider', '$locationProvider', '$translate', function($urlRouterProvider, $stateProvider, $locationProvider, $translate){
$urlRouterProvider
.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: '/views/home.html',
controller: 'HomeCtrl'
})
.state('home.rules', {
url: '^/rules',
templateUrl: '/views/rules.html'
})
.state('home.terms', {
url: '^/terms',
templateUrl: '/views/terms.html'
})
.state('home.faq', {
url: '^/faq',
templateUrl: '/views/faq.html'
})
.state('language', {
controller: function() {
console.log('ok');
$translate.use(($translate.use() === 'fr') ? 'en' : 'fr' );
}
});
$locationProvider.html5Mode(true);
}]);
}());
我还有一个包含我的翻译的翻译.js文件,当不尝试在上述路由中注入和使用 $translate.use() 时.js文件我没有问题使用翻译控制器:
'use strict';
(function() {
angular.module('frontApp')
.config(['$translateProvider', function($translateProvider) {
$translateProvider
.translations('fr', {
language: 'English',
otherLanguage: 'en',
cssClass: 'french',
linkHome: 'Accueil',
linkRules: 'Règlement',
linkTerms: 'Termes et conditions',
linkFAQ: 'FAQ',
})
.translations('en', {
language: 'Français',
otherLanguage: 'fr',
cssClass: 'english',
linkHome: 'Home',
linkRules: 'Rules',
linkTerms: 'Terms and conditions',
linkFAQ: 'FAQ',
});
$translateProvider.preferredLanguage('fr');
}])
.controller('TranslateController', ['$translate', '$scope', '$location', function ($translate, $scope, $location) {
// The URLs need to be updated
var host = $location.host();
if ( host === 'localhost' || host === '0.0.0.0') {
$translate.use('fr');
}
else if (host === 'localhost-en') {
$translate.use('en');
}
$scope.switchLanguage = function() {
$translate.use(($translate.use() === 'fr') ? 'en' : 'fr' );
};
}]);
}());
这是应用程序.js:
'use strict';
angular
.module('frontApp', [
'ui.router',
'ngAnimate',
'ngCookies',
'ngResource',
'ngSanitize',
'ngTouch',
'pascalprecht.translate'
]);
我错过了什么?非常感谢您的时间和帮助。
这里的解决方案是将"$translate"的DI定义移动到它所属的位置,即移动到controller
定义中:
.state('language', {
// instead of this
// controller: function() {
// use this
controller: function($translate) {
console.log('ok');
$translate.use(($translate.use() === 'fr') ? 'en' : 'fr' );
}
});
甚至更好的controller: ['$translate', function($translate) {... }]
为什么当前的解决方案不起作用?好吧,让我们看一下上面代码的摘录:
// I. CONFIG phase
.config(['$urlRouterProvider', '$stateProvider', '$locationProvider', '$translate'
, function($urlRouterProvider, $stateProvider, $locationProvider, $translate){
...
$stateProvider
...
.state('language', {
// II. CONTROLLER - RUN phase
controller: function() {
如我们所见,我们在配置阶段要求上述$translate
。所以我们收到供应商...要配置。
但是控制器定义期望提供已配置的服务。它必须有自己的DI ...因为它将在运行阶段执行...
另请查看此问答,了解有关配置阶段与运行阶段提供程序的更多详细信息 - 获取错误:Unkown 提供程序:$urlMatcherFactory
相关文章:
- 偶尔结结巴巴地说“;堆叠的”;translate()上的转换(v4.0.0-alpha40)
- $translateProvider.useStaticFilesLoader的Angular Translate异步定
- Unit-testing multiple use cases with Karma & Mocha.js
- AngularJS无法使用translate值正确翻译
- JQuery在类中设置CSS Transform、Translate属性
- 仅在Express4上使用app.use('/api')时呈现页面
- Express router.use not working
- Use an external .jpg image in a gallery modal based on CSS &
- 如何加载JSON数组以使用Angular-Translate翻译AngularJS网页
- AngularJS translate & ui tooltip html
- AngularJS translate table
- <!文档html>在JS脚本中触发“use strict”
- 如何使用css translate实现平移
- Javascript str_ replace use“;加“;以及“;减去“;正则表达式中的字符
- Use React and Express
- Use Strict MeteorJS
- Serlvet's request.getParameter and onclick use
- app.use(restify.bodyParser())无法工作,因为req对象为空
- 在 ui-router 配置文件中使用 angular-translate 的 $translate.use()
- TypeError:$translate.use不是函数