SPA路由与ng-view问题：keyuser.html数据表格仅直接访问时显示

Hey there! Let's break down why your keyuser.html works when loaded directly but fails to render the data table after routing from home.html:

1. You're using a full HTML page as a route template #

When you load keyuser.html directly, it's a complete standalone page with its own <!DOCTYPE>, <html>, and <body> tags. But when routing via ng-view, AngularJS injects the template content into the existing DOM of home.html. Having duplicate root-level tags in your template will break the DOM structure, preventing the data table from rendering correctly.

Fix:
Trim keyuser.html to a partial template—remove all root-level tags and only keep the content that should be injected into ng-view. For example:

<!-- Modified keyuser.html (partial template) -->
<div ng-controller="KeyUserController">
  <button ng-click="handleUpdate()">更新</button>
  <table class="data-table">
    <thead>
      <tr>
        <th>ID</th>
        <th>用户名</th>
        <!-- Add other table headers -->
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="user in keyUsers">
        <td>{{user.id}}</td>
        <td>{{user.username}}</td>
        <!-- Add other table cells -->
      </tr>
    </tbody>
  </table>
</div>

2. Data loading logic isn't triggering on route change #

When you load keyuser.html directly, your data-fetching code (probably in window.onload or $(document).ready()) runs because the page is freshly loaded. But when routing via ng-view, the main page's DOM is already loaded, so these DOM-ready events won't fire again—meaning your data never gets fetched for the table.

Fix:
Move your data loading logic into your AngularJS controller, so it runs whenever the controller is initialized (which happens when the route loads the template):

angular.module('yourApp', ['ngRoute'])
.controller('KeyUserController', function($scope, $http) {
  // Fetch data when the controller loads (works for direct access AND routing)
  $http.get('/api/keyusers')
    .then(function(response) {
      $scope.keyUsers = response.data;
    })
    .catch(function(error) {
      console.error('Failed to load key user data:', error);
    });

  $scope.handleUpdate = function() {
    // Your update button logic here
  };
})
.config(function($routeProvider) {
  $routeProvider
    .when('/home', {
      templateUrl: 'home.html'
    })
    .when('/keyuser', {
      templateUrl: 'keyuser.html',
      controller: 'KeyUserController' // Ensure controller is bound to the route
    })
    .otherwise({ redirectTo: '/home' });
});

3. Missing route controller configuration #

If you haven't explicitly tied KeyUserController to your /keyuser route, AngularJS might not initialize the controller when routing—even if you have ng-controller in the template. This would leave your data scope empty, so the table has nothing to render.

Fix:
Double-check your $routeProvider config (as shown in the code above) to make sure the controller property is set for the /keyuser route.

4. Check for browser console errors #

Always open your browser's developer tools (F12) and check the Console tab for errors. Common issues here include:

• 404 errors for the keyuser.html template (wrong path in templateUrl)
• Unknown provider errors (missing dependencies in your controller)
• HTTP errors from your API (data request failing silently)

These errors will give you direct clues about what's broken beyond the visible table issue.

内容的提问来源于stack exchange，提问作者Michael_S