Question

我使用angular.js编写了一个应用程序，并尝试根据他们登陆的页面加载不同的子视图。具体地，当用户登陆英语版本时，加载部分视图，当他们登陆法语版本时，加载不同的视图。但无论我在代码中没有看到什么，子视图总是落在ELSE（或＆＃39; /＆＃39;）路线上。这是我的appRoutes.js文件中的当前代码...

angular.module('appRoutes', []).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {

var homeLang = document.documentElement.getAttribute('lang');
var english = 'en';

var homeView = function (homeLang) {

    if (homeLang === english) {
         homeView = '/';
         return homeView;
        } else {

        homeView = '/accueil';
        return homeView;
    }
};

$routeProvider

    // client routes

    .when('/', {
        templateUrl: 'views/home.html',
        controller: 'MainController'
    })

    .when('/web', {
        templateUrl: 'views/web.html',
        controller: 'MainController'
    })

    .when('/design', {
        templateUrl: 'views/design.html',
        controller: 'MainController'
    })

    .when('/hosting', {
        templateUrl: 'views/hosting.html',
        controller: 'MainController'
    })

    .when('/contact', {
        templateUrl: 'views/contact.html',
        controller: 'MainController'
    })

    .when('/accueil', {
        templateUrl: 'views/accueil.html',
        controller: 'MainController'
    })

    .when('/sites', {
        templateUrl: 'views/sites.html',
        controller: 'MainController'
    })

    .when('/services', {
        templateUrl: 'views/services.html',
        controller: 'MainController'
    })

    .when('/hebergement', {
        templateUrl: 'views/hebergement.html',
        controller: 'MainController'
    })

    .when('/contactez', {
        templateUrl: 'views/contactez.html',
        controller: 'MainController'
    })

    .otherwise({ redirectTo: homeView });

$locationProvider.html5Mode(true);

}]);

这是加载不同视图的HTML。

<body ng-app="myApp">
<div class="navbar-wrapper">
<div class="container">
  <div role="navigation" class="navbar navbar-inverse navbar-static-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
      </div>
      <div class="navbar-collapse collapse">
        <div class="nav navbar-nav">
          <li><a href="/accueil">Accueil</a></li>
          <li><a href="/sites">Sites & Apps</a></li>
          <li><a href="/services">Design</a></li>
          <li><a href="/hebergement">Hébergement</a></li>
          <li><a href="/contactez">Contact</a></li>
        </div>
      </div></div></div></div></div>
 <section class="content">
<div ng-view></div></section></body>

Answer 1

在您的视图中，您可以根据语言加载不同的模板，而无需更改路由。例如，在路由视图中有类似的东西你还可以在每个跨度之前添加一个ng-if来检查语言值。

Answer 2

我实际上回到了代码并使用了ui-router，并创建了带有构建块的状态（几个视图），它解决了我所有的问题！：）

根据语言重新路由到不同的子视图

2 个答案: