我是 angular.js 的新手。我已经编写了 Controller 、服务等来使用数据服务获取数据,但我的 View 页面显示为空白。我已经检查了所有内容,但无法解决问题,任何帮助都将不胜感激。
//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>
最佳答案
您的服务代码
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 代码中缺少 App 和 Controller 引用
//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>
关于php - angular.js View 返回空白页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40211788/