ng-view未顯示頁面，但控制器正在工作

Question

我的代碼如下：

https://plnkr.co/edit/p3lgYwMRgSg7UHNLLAP9?p=info

當我打開鏈接時，無法在main.html中顯示部分內容。 我嘗試了不同的瀏覽器，並且遇到了相同的問題。 我可以在控制台日志中看到正在調用控制器。 我只是不確定為什么我的ngView無法正常工作。

索引文件：

    !DOCTYPE html>
<html lang="en" ng-app="Computer">

  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Computer Solutions</title>
    <!-- Bootstrap core CSS -->
    <link href="bootstrap.min.css" rel="stylesheet" />
    <!-- Custom styles for this template -->
    <link href="style.css" rel="stylesheet" />
  </head>

  <body>
    <div class="container">
      <!-- The justified navigation menu is meant for single line per list item.
           Multiple lines will require custom code not provided by Bootstrap. -->
      <div class="masthead">
        <h3 class="text-muted">Computer Solutions</h3>
        <nav>
          <ul class="nav nav-justified">
            <li>
              <a href="#/main">Home</a>
            </li>
            <li>
              <a href="about.html">About</a>
            </li>
            <li>
              <a href="services.html">Services</a>
            </li>
            <li>
              <a href="contact.html">Contact</a>
            </li>
          </ul>
        </nav>
      </div>

      <div ng-controller="MainCtrl">
        <div ng-view></div>
      </div>

      <!-- Site footer -->
      <footer class="footer">
        <p>© 2015 Company, Inc.</p>
      </footer>
    </div>
    <!-- /container -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
    <script src="https://code.angularjs.org/1.3.14/angular.js"></script>
    <script src="https://code.angularjs.org/1.3.14/angular-route.js"></script>
    <script src="script.js"></script>
  </body>
</html>

script.js文件

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

.config(['$routeProvider', function($routeProvider){
  $routeProvider.
    when('/main',{
      templateURL: 'main.html',
      controller: 'MainCtrl'
    }).
    otherwise({redirectTo:'/main'})
}])

.controller('MainCtrl',[function(){
  console.log('This is 111the MainCtrl');
}]);

main.html中

<!-- Jumbotron -->
  <div class="jumbotron">
    <div class="row">
      <div class="col-md-4">
        <img src="http://techguystaging.com/files/computer-icon.png">
      </div>

      <div class="col-md-8">
        <h1>Computer Solutions</h1>
        <p class="lead">Get your stuff fixed here.</p>
      </div>
    </div>
  </div>

  <!-- Example row of columns -->
  <div class="row">
    <div class="col-lg-4">
      <h2>Hardware Repairs</h2>
      <p>Get your CPU fixed here along with your other tech stuff </p>
    </div>
    <div class="col-lg-4">
      <h2>Virus Removal</h2>
      <p>Destroy those trojan horses and worms</p>
   </div>
    <div class="col-lg-4">
      <h2>System Tune up</h2>
      <p>Faster better stronger.</p>
    </div>
  </div>

Answer 1

首先，通過路由定義實例化ng-controller ，從而擺脫index.html中的ng-controller行（您不必顯式加載它）。

似乎不起作用的原因是main.html的相對URL字符串。 更改為此，它應該工作：

$routeProvider.
    when('/main',{
       templateUrl: './main.html',
       controller: 'MainCtrl'
    })

我在這里創建並更新了插件： https ://plnkr.co/edit/uTGiDCF18J0fvQpg1It1 ? p = preview

ng-view未顯示頁面，但控制器正在工作

問題描述

1 個解決方案

解決方案1
0 已采納 2016-01-01 04:31:46

ng-view未顯示頁面，但控制器正在工作

問題描述

1 個解決方案

解決方案1 0 已采納 2016-01-01 04:31:46

解決方案1
0 已采納 2016-01-01 04:31:46