Question

我是AngularJS的新手，正在研究我的第一个Plunkr。当用户执行搜索时（从main.html，相应的控制器是MainController），正在呈现正确的视图（user.html），但来自控制器（UserController）的数据未传递给视图。我做错了什么？

这里是代码的链接：

http://plnkr.co/edit/OcfB6tBB36qWO9MiZ9CI?p=preview

布局页面（Index.html）：

<!DOCTYPE html>
<html ng-app="githubViewer">

  <head>
    <script data-require="angular.js@*" data-semver="4.0.0" src="https://code.angularjs.org/latest/angular.min.js"></script>
    <script data-require="angular-route@*" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="app.js"></script>
    <script src="MainController.js"></script>
    <script src="UserController.js"></script>
  </head>

  <body>
    <h1>GitHub Viewer</h1>
    <div ng-view></div>
  </body>

</html>

主页（main.html）

<div>
  {{ countdown }}
  <form name="searchUser" ng-submit="search(username)">
    <input type="search" required="" placeholder="User name to find" ng-model="username" />
    <input type="submit" value="Search" />
  </form>
</div>

用户详细信息页面（user.html）

<h1>{{ user.name }}</h1>
{{ error }}
<div><img src="{{ user.avatar_url }}" title="{{user.name}}"> Order:
  <select ng-model="repoSortOrder">
    <option value="+name">Name</option>
    <option value="-stargazers_count">Stars</option>
    <option value="+language">Language</option>
  </select>
</div>

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Stars</th>
      <th>Repos</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="repo in repos | orderBy:repoSortOrder">
      <td>{{ repo.name }}</td>
      <td>{{ repo.stargazers_count | number}}</td>
      <td>{{ repo.language }}</td>
    </tr>
  </tbody>
</table>

MainController.js - 控制main.html：

var app = angular.module('githubViewer');

app.controller('MainController', function($scope, $http, $interval,
                                   $log, $anchorScroll, $location) {

  $scope.repoSortOrder = "-stargazers_count";

  $scope.search = function(username) {
    $log.info("Searching for " + username);
      if(countdownInterval) {
        $interval.cancel(countdownInterval);
        $scope.countdown = null;
      }
      $location.path("/user/" + username);
  };

  var countdownInterval = null;

  var startCountdown = function() {
    countdownInterval = $interval(decrementCountdown, 1000, $scope.countdown);
  };

  var decrementCountdown = function() {
    $scope.countdown -= 1;
    if($scope.countdown < 1) {
      $scope.countdown = null;
      $scope.search($scope.username);
    }
  };

  $scope.username = "angular";
  $scope.countdown = 5;
  startCountdown();

});

UserController.js（控制user.html） - 这是它似乎失败的地方。

var app = angular.module('githubViewer');

app.controller("UserController", UserController);

var UserController = function($scope, $log, $http, $routeParams) {

  var onUserComplete = function(response) {
    $scope.user = response.data;
    $http.get($scope.user.repos_url)
    .then(onRepos, onError);
  };


  var onRepos = function(response) {
     $scope.repos = response.data;
     $location.hash("userDetails");
     $anchorScroll();
  };

  var onError = function(reason) {
    $scope.error = "Could not fetch the data";
  };

  $scope.username = $routeParams.username;
  $scope.repoSortOrder = "-stargazers_count";
  $http.get("https://api.github.com/users/" + username)
      .then(onUserComplete, onError);

};

任何帮助将不胜感激。

AngularJS数据未在视图中显示

0 个答案: