Question

我是angular.js的新手。我已经编写了控制器，服务等来使用数据服务获取数据但我的视图页面显示为空白。我已经检查了所有的东西，但无法解决问题，任何帮助都会很明显。

//My app.js
'use strict';
angular.module('CricdomApp', [
  'CricdomApp.services',
  'CricdomApp.controllers',
  'ui.router'
]).
config(['$routeProvider', function($routeProvider) {
  $routeProvider.
    when("/team", {templateUrl: "partials/list.html", controller: "teamController"}).
    otherwise({redirectTo: '/'});
}]);

//Controller
angular.module('CricdomApp.controllers', []).
controller('teamController', function($scope, cricAPIservice) {
    $scope.id = $routeParams.id;
    $scope.races = [];
    $scope.driver = null;
    $scope.driversList = [];

    cricAPIservice.getDrivers().success(function (response) {
        //Digging into the response to get the relevant data
        $scope.driversList = response.MRData.StandingsTable.StandingsLists[0].DriverStandings;
    });
});

//Services
angular.module('CricdomApp.services', []).
  factory('cricAPIservice', function($http) {

    var cricAPI = {};

    cricAPI.getDrivers = function() {
      return $http({
        method: 'JSONP', 
        url: 'http://nobleislam.com/cricdom_backend/public/team/list?callback=JSON_CALLBACK'
      });
    }


    return cricAPI;

  });

//List html page.
<section id="main">
  <a href="./#/team"><- 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.country}}   <br/>
      Team: {{driver.Constructors[0].name}}<br/>
      <!-- Birth: {{driver.Driver.dateOfBirth}}<br/> -->
      <!-- <a href="{{driver.Driver.url}}" target="_blank">Biography</a> -->
    </div>
  </nav>

</section>

//Index page
<section id="main">
  <a href="./#/team"><- Back to drivers list</a>
  <nav id="secondary" class="main-nav">

    <div class="driver-status">
      Country: {{driver.Driver.country}}   <br/>
      Team: {{driver.Constructors[0].name}}<br/>
    </div>
  </nav>


</section>

Answer 1

您的服务代码

angular.module('CricdomApp.services', []).
  factory('cricAPIservice', function($http) {

    var cricAPI = {};

    cricAPI.getDrivers = function() {
      return $http({
        dataType: 'JSONP',
        method: 'POST', 
        url: 'http://nobleislam.com/cricdom_backend/public/team/list?callback=JSON_CALLBACK'
      });
    }


    return cricAPI;

  });

您在HTML代码中缺少应用和控制器参考

//ng-app="CricdomApp" ng-controller="teamController"
<div id="Container" ng-app="CricdomApp" ng-controller="teamController">
    <section id="main">
      <a href="./#/team"><- 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.country}}   <br/>
          Team: {{driver.Constructors[0].name}}<br/>
          <!-- Birth: {{driver.Driver.dateOfBirth}}<br/> -->
          <!-- <a href="{{driver.Driver.url}}" target="_blank">Biography</a> -->
        </div>
      </nav>

    </section>

    //Index page
    <section id="main">
      <a href="./#/team"><- Back to drivers list</a>
      <nav id="secondary" class="main-nav">

        <div class="driver-status">
          Country: {{driver.Driver.country}}   <br/>
          Team: {{driver.Constructors[0].name}}<br/>
        </div>
      </nav>


    </section>
</div>

angular.js视图返回空白页面

1 个答案: