Question

我试图通过导航栏使用ngRoute导航到其他HTML页面，但当我点击导航栏上的不同按钮时，页面上没有任何内容。

Index.html文件：

<!DOCTYPE html>
<html>

<style>
table, th , td  {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}
table tr:nth-child(odd) {
  background-color: #f1f1f1;
}
table tr:nth-child(even) {
  background-color: #ffffff;
}
</style>

<head>
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Brazil Healthcare Project</title>
    <link type="text/css" rel="stylesheet" href="css/bootstrap.css">
  <link type="text/css" rel="stylesheet" href="css/bootstrap-formhelpers.css">
  <link type="text/css" rel="stylesheet" href="css/main.css">
</head>

<body ng-app="brazilApp" >
    <div class="container">
        <nav class="navbar navbar-default main-nav" role="navigation">
              <!-- Met HI Lab Logo -->        
        <div class="navbar-header">
          <a href="http://www.met-hilab.org/"><img src="img/hilab-logo.png" alt="MET HiLab"></a>
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#antidote-navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>           
            </div>          
        <!-- Navigation Tabs -->
        <div class="collapse navbar-collapse" id="antidote-navbar">
          <ul class="nav nav-tabs main-nav-ul">
              <li><a href="#/home" id="tab-home"><img src="img/home.jpg">Home</a></li>
              <li><a href="#/brazil" id="tab-brazil"><img src="img/health.png">Brazil</a></li>
              <li><a href="#/toxin" id="tab-toxin"><img src="img/toxin.jpg">Analysis</a></li>
              <li><a href="#/FAQ" id="tab-FAQ"><img src="img/FAQ.jpg">FAQ</a></li>   
          </ul>
        </div>
          </nav>



        <!-- Website Footer -->
        <footer id="footer">
            <div class="text-center">
                <img src="img/bu-logo-small.gif">
            <div>
                <ul class="list-inline">
            <li><a href="http://www.met-hilab.org/" target="_blank">MET HI Lab</a></li>
          </ul>
              </div>
        </div>
      <!-- Disclaimer -->
        <div class="col-lg-offset-2 col-lg-8 main-disclaimer">
            <p>
          DISCLAIMER: This educational program is not intended for individual patient care. If you are caring for a known or suspected poisoned patient, please contact your regional poison control center for patient specific management by dialing 1-800-222-1222.
        </p>
        </div>
    </footer>
    </div>  <!-- /container -->


  <script type="text/javascript" src="js/framework/bootstrap.min.js"></script>
  <script type="text/javascript" src="js/framework/angular.js"></script>
  <script type="text/javascript" src="js/framework/angular-route.js"></script>   
  <script type="text/javascript" src="js/controller/RoutingCtrl.js"></script> 

</body>
</html>

RoutingCtrl.js文件：

var app = angular.module('brazilApp', ['ngRoute'])

app.config(['$routeProvider', "$locationProvider",
    function($routeProvider,  $locationProvider) {
      $locationProvider.hashPrefix("");
      $routeProvider.
        when('/home', {
          templateUrl: 'view/home.html'
        }).
        when('/brazil', {
          templateUrl: 'view/brazil.html'
        }).
        when('/toxin', {
          templateUrl: 'view/toxin.html'
        }).
        when('/FAQ', {
          templateUrl: 'view/FAQ.html',
          controller:"AlgorithmListCtrl"
        }).
        otherwise({
          redirectTo: '/home'
        });
}]);

有人可以帮助我吗？

Answer 1

您需要在index.html文件中包含ng-view指令。

<div ng-view> </div>

Answer 2

<body ng-app="myApp">

  <ul class="nav nav-tabs main-nav-ul">
    <li>
      <a href="#home">Home</a>
    </li>
    <li>
      <a href="#brazil">Brazil</a>
    </li>
    <li>
      <a href="#toxin">Analysis</a>
    </li>
  </ul>

  <div ng-view></div>

</body>

这是工作Plunkr

ngRoute不指向其他页面

2 个答案: