Question

我试图以角度设置一个简单的导航系统。每当我点击一个标签时，它都会将我发送到/ tab，而不是将内容加载到页面中。

下面的代码，提前谢谢！

＆＃13;

angular.module('app', ['ngRoute'])

.directive('languageSelector', function() {
  return {
    restrict: 'E',
    templateUrl: 'includes/directives/language-selector.html'
  }
})

.config(function($routeProvider) {
  $routeProvider.when('/blog/it', {
      templateUrl: 'includes/it/header.html'
    })
    .when('/blog/fr', {
      templateUrl: 'includes/fr/header.html'
    })
    .when('/blog/es', {
      templateUrl: 'includes/es/header.html'
    })
    .when('/', {
      templateUrl: 'includes/it/header.html'
    })
    .otherwise({
      redirectTo: '/'
    });
});

＆＃13;

<!doctype html>
<html ng-app="app">

<head>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.js"></script>
  <script src="js/app.js"></script>
</head>

<body>
  <header>
    <div ng-view></div>
    <a href="/blog/it" class="svg-wrapper">
      <svg height="40" width="40" xmlns="http://www.w3.org/2000/svg">
        <rect id="it-white" class="shape" height="40" width="40" stroke="#ffffff" />
        <rect id="it-red" class="shape" height="40" width="40" stroke="#ed2939" />
        <rect id="it-green" class="shape" height="40" width="40" stroke="#009949" />
        <text x="10" y="28" fill="#fff" class="text">IT</text>
      </svg>
    </a>

    <a href="/blog/fr" class="svg-wrapper">
      <svg height="40" width="40" xmlns="http://www.w3.org/2000/svg">
        <rect id="fr-white" class="shape" height="40" width="40" stroke="#ffffff" />
        <rect id="fr-red" class="shape" height="40" width="40" stroke="#ed2939" />
        <rect id="fr-blue" class="shape" height="40" width="40" stroke="#3a3dd9" />
        <text x="5" y="28" fill="#fff" class="text">FR</text>
      </svg>
    </a>

    <a href="/blog/es" class="svg-wrapper">
      <svg height="40" width="40" xmlns="http://www.w3.org/2000/svg">
        <rect id="es-red" class="shape" height="40" width="40" stroke="#ed2939" />
        <rect id="es-yellow" class="shape" height="40" width="40" stroke="#ffc400" />
        <text x="5" y="28" fill="#fff" class="text">ES</text>
      </svg>
    </a>
  </header>
</body>


</html>

＆＃13;

Answer 1

将您的路由配置更改为：

$routeProvider.when('/it', {
  templateUrl: 'includes/it/header.html'
})
.when('/fr', {
  templateUrl: 'includes/fr/header.html'
})
.when('/es', {
  templateUrl: 'includes/es/header.html'
})
.when('/', {
  templateUrl: 'includes/it/header.html'
})
.otherwise({
  redirectTo: '/'
});

并链接到此：

<a href="#/fr" class="svg-wrapper">
    ...
 </a>

路由链接遵循URL而不是由Angular

1 个答案: