我正在使用ui-router进行路由选择,并使用angular-translate进行翻译。我想实现的是将所选语言绑定到url,如下所示:
www.mydomain.com/en/ www.mydomain.com/ru/ www.mydomain.com/en/about www.mydomain.com/ru/about
它将做出相应的响应。
试图寻找例子,但没有找到任何东西。如果有人实施了类似的解决方案,我很想听听您是如何做到的。
谢谢
我使用以下方式:
CoffeeScript
angular.module('app') .config([ '$stateProvider' ($stateProvider) -> $stateProvider.state 'app', abstract: true url: '/{locale}' $stateProvider.state 'app.root', url: '' $stateProvider.state 'app.root.about', url: '/about' ])
JavaScript
angular.module('app').config([ '$stateProvider', function($stateProvider) { $stateProvider.state('app', { abstract: true, url: '/{locale}' }); $stateProvider.state('app.root', { url: '' }); return $stateProvider.state('app.root.about', { url: '/about' }); } ]);
这样,您就可以注入$stateParams控制器并访问那里的语言环境:
$stateParams
angular.module('app') .controller('appCtrl', [ '$scope', '$stateParams' ($scope, $stateParams) -> $scope.locale = $stateParams.locale ])
angular.module('app').controller('appCtrl', [ '$scope', '$stateParams', function($scope, $stateParams) { return $scope.locale = $stateParams.locale; } ]);
或者,如果要自动影响整个页面,请$stateChangeStart在应用程序控制器或类似控制器中使用该事件:
$stateChangeStart
$scope.$on '$stateChangeStart', (event, toState, toParams, fromState, fromParams) -> $translate.use(toParams.locale)
$scope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) { $translate.use(toParams.locale); });
请注意,如果您使用angular-translate v1.x,则应使用$translate.uses而不是$translate.use。
$translate.uses
$translate.use