Question

我正在制作我的第一个AngularJS应用程序，然后是本教程： https://www.toptal.com/angular-js/a-step-by-step-guide-to-your-first-angularjs-app

当我直接查看1时问题出在我的应用程序中，它运行正常。它可以使用所有驱动程序的信息加载HTML文件。但是，当我单击一个特定的驱动程序时，它无法加载特定驱动程序的HTML页面。如何重定向到特定驱动程序的HTML页面？

App结构

查看1：

view1.html
JS
驱动器 --------- driver.html

查看2

view2.html

＆＃13;

<p>This is the partial for view 1.</p>


<input type="text" ng-model="filterTxn.Driver.givenName" placeholder="Search..."/>
<table>
  <thead>
    <tr><th colspan="4">Drivers Championship Standings</th></tr>
  </thead>
  <tbody>
    <tr ng-repeat="driver in driversList | filter: filterTxn ">
      <td>{{$index + 1}}</td>
      <td>
        <a href="#/view1/driver/{{driver.Driver.driverId}}">
          {{driver.Driver.givenName}}&nbsp;{{driver.Driver.familyName}}
        </a>
      </td>
      <td>{{driver.Constructors[0].name}}</td>
      <td>{{driver.points}}</td>
    </tr>
  </tbody>
</table>

＆＃13;

<p>detail page for a specific driver</p>


<section id="main">
  <a href="./#/drivers"><- Back to drivers list</a>
  <nav id="secondary" class="main-nav">
    <div class="driver-picture">
      <div class="avatar">
        <img ng-show="driver" src="img/drivers/{{driver.Driver.driverId}}.png" />
        <img ng-show="driver" src="img/flags/{{driver.Driver.nationality}}.png" /><br/>
        {{driver.Driver.givenName}} {{driver.Driver.familyName}}
      </div>
    </div>
    <div class="driver-status">
      Country: {{driver.Driver.nationality}}   <br/>
      Team: {{driver.Constructors[0].name}}<br/>
      Birth: {{driver.Driver.dateOfBirth}}<br/>
      <a href="{{driver.Driver.url}}" target="_blank">Biography</a>
    </div>
  </nav>

  <div class="main-content">
    <table class="result-table">
      <thead>
        <tr><th colspan="5">Formula 1 2013 Results</th></tr>
      </thead>
      <tbody>
        <tr>
          <td>Round</td> <td>Grand Prix</td> <td>Team</td> <td>Grid</td> <td>Race</td>
        </tr>
        <tr ng-repeat="race in races">
          <td>{{race.round}}</td>
          <td><img  src="img/flags/{{race.Circuit.Location.country}}.png" />{{race.raceName}}</td>
          <td>{{race.Results[0].Constructor.name}}</td>
          <td>{{race.Results[0].grid}}</td>
          <td>{{race.Results[0].position}}</td>
        </tr>
      </tbody>
    </table>
  </div>

</section>

view1.js：

＆＃13;

'use strict';

angular.module('myApp.view1', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/view1', {
    templateUrl: 'view1/view1.html',
    controller: 'View1Ctrl'
  });
}])
.controller('View1Ctrl', [function() {

}]);


angular.module('F1FeederApp', [
  'F1FeederApp.services',
  'F1FeederApp.controllers',
  'ngRoute'
]).
config(['$routeProvider', function($routeProvider) {
  $routeProvider.
	when("/drivers/:id", {templateUrl: "view1/driver/driver.html", controller: "driverController"}).
	otherwise({redirectTo: '/view1'});
}]);

＆＃13;

services.js：

＆＃13;

angular.module('F1FeederApp.services', [])
  .factory('ergastAPIservice', function($http) {

    var ergastAPI = {};

    ergastAPI.getDrivers = function() {
      return $http({
        method: 'JSONP',
        url: 'http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK'
      });
    }

    ergastAPI.getDriverDetails = function(id) {
      return $http({
        method: 'JSONP',
        url: 'http://ergast.com/api/f1/2013/drivers/'+ id +'/driverStandings.json?callback=JSON_CALLBACK'
      });
    }

    ergastAPI.getDriverRaces = function(id) {
      return $http({
        method: 'JSONP',
        url: 'http://ergast.com/api/f1/2013/drivers/'+ id +'/results.json?callback=JSON_CALLBACK'
      });
    }

    return ergastAPI;
  });

＆＃13;

angular.module('F1FeederApp.controllers', []).

  /* Drivers controller */
  controller('driversController', function($scope, ergastAPIservice) {
    $scope.nameFilter = null;
    $scope.driversList = [];
    $scope.searchFilter = function (driver) {
        var re = new RegExp($scope.nameFilter, 'i');
        return !$scope.nameFilter || re.test(driver.Driver.givenName) || re.test(driver.Driver.familyName);
    };

    ergastAPIservice.getDrivers().success(function (response) {
        //Digging into the response to get the relevant data
        $scope.driversList = response.MRData.StandingsTable.StandingsLists[0].DriverStandings;
    });
  }).

  /* Driver controller */
  controller('driverController', function($scope, $routeParams, ergastAPIservice) {
    $scope.id = $routeParams.id;
    $scope.races = [];
    $scope.driver = null;

    ergastAPIservice.getDriverDetails($scope.id).success(function (response) {
        $scope.driver = response.MRData.StandingsTable.StandingsLists[0].DriverStandings[0];
    });

    ergastAPIservice.getDriverRaces($scope.id).success(function (response) {
        $scope.races = response.MRData.RaceTable.Races;
    });
  });

＆＃13;

Answer 1

使用ui-sref代替href来触发状态更改。

<p>This is the partial for view 1.</p>


<input type="text" ng-model="filterTxn.Driver.givenName" placeholder="Search..."/>
<table>
  <thead>
    <tr><th colspan="4">Drivers Championship Standings</th></tr>
  </thead>
  <tbody>
    <tr ng-repeat="driver in driversList | filter: filterTxn ">
      <td>{{$index + 1}}</td>
      <td>
        <a ui-sref="/driver/{{driver.Driver.driverId}}">
          {{driver.Driver.givenName}}&nbsp;{{driver.Driver.familyName}}
        </a>
      </td>
      <td>{{driver.Constructors[0].name}}</td>
      <td>{{driver.points}}</td>
    </tr>
  </tbody>
</table>

AngularJS路由器：重定向到不同的视图

1 个答案: