Question

我有一个AngularJS webapp。我正在更改应用程序，因此URL可以是多语言（用于SEO索引目的）。

我正在设置我的app.js，就像这样：

$routeProvider.when('/:language', {templateUrl: 'partials/home.html', controller: 'HomeCtrl'});     
    $routeProvider.when('/:language/about', {templateUrl: 'partials/about.html', controller: 'AboutCtrl'});

然后，在服务中，我使用$ routeParams获取语言参数，并使用angular-translate调用我的翻译代码，以相应的语言提供页面。

到目前为止一切正常。

但是，此外，在菜单栏中，我有一个选择组合框来选择语言。因此，当用户更改语言时，url语言参数应该更改。

我该怎么做？

Answer 1

这是一个例子。就像我在你的另一个问题中所说的那样，我会使用ui-router。

http://plnkr.co/edit/bCNgS07BblMHz55VBRSQ?p=preview

语言下拉列表将保留当前选定的状态。所以，如果你去家里 - ＆gt;段落，然后改变语言，你将保留在段落路线上，但语言参数将会改变。

app.js：

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

    $urlRouterProvider.otherwise('/en');

    $stateProvider
        .state('lang', {
            url: '/:language',
            templateUrl: 'partial-lang.html',
            abstract: true,
            controller: function($state, $scope) {
              $scope.changeLanguage = function(language) {
                $state.go($state.current.name, {language: language});
              }
            }
        })

        .state('lang.home', {
            url: '',
            templateUrl: 'partial-home.html'
        })

        .state('lang.home.list', {
            url: '/list',
            templateUrl: 'partial-home-list.html',
            controller: function($scope) {
                $scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
            }
        })

        .state('lang.home.paragraph', {
            url: '/paragraph',
            template: 'I could sure use a drink right now.'
        })

        .state('lang.about', {
            url: '/about',
            templateUrl: 'partial-about.html'
        });
});

局部lang.html：

<nav class="navbar navbar-inverse" role="navigation">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">AngularUI Router</a>
    </div>
    <ul class="nav navbar-nav">
        <li><a ui-sref=".home">Home</a></li>
        <li><a ui-sref=".about">About</a></li>
        <li class="dropdown">
          <a href class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Language: {{$state.params.language | uppercase}} <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href ng-click="changeLanguage('en')">English</a></li>
            <li><a href ng-click="changeLanguage('fr')">Français</a></li>
            <li><a href ng-click="changeLanguage('ru')">Русский</a></li>
          </ul>
        </li>
    </ul>
</nav>

<div class="container">
    <div ui-view></div>
</div>

的index.html

<body ng-app="routerApp">
  <div ui-view></div>
  <pre>
    <p>state = {{$state | json}}</p>
  </pre>
</body>

其余文件不言自明

Answer 2

您将组合框绑定到变量，然后您可以使用$ watch来了解它何时更改，最后您可以使用$ route来更新语言。

$watch info

$route info

更新

这样的事情：

        $scope.$watch('language', function (newValue, oldValue) {
            if (newValue !== oldValue) {
                $route.updateParams({language: newValue});
            }
        });

更新版本1.0.7

        $scope.$watch('language', function (newValue, oldValue) {
            if (newValue !== oldValue) {
                var path = $location.path();
                path = path.replace('/'+oldValue+'/', '/'+newValue+'/');
                console.log(path);
                $location.path(path);
                $route.reload();
            }
        });

AngularJS多语言路由

2 个答案: