0
伍重複似乎並沒有工作角NG-重複不工作Spotify應用
App.js
var app = angular.module('angularjs-starter', ['jsonService', 'ngRoute', 'ngResource'])
app.controller('MainCtrl', function($scope, JsonService) {
//JsonService.get(function(data) {
// $scope.name = data.artists.href;
// $scope.children = data.artists.items;
//});
$scope.searchShow =() => {
JsonService.search.query({
show: $scope.showname
}, (response) => {
console.log(response);
// $scope.name = response.artists.href;
$scope.children = response;
})
}
$scope.showDetails = (id) => {
console.log(id);
JsonService.detail.get({
details: id
}, (response) => {
console.log(response.items);
// $scope.name = response.artists.href;
$scope.details = response.items;
})
}
});
app.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('')
}])
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/search.html',
controller: 'MainCtrl'
})
.when('/details', {
templateUrl: 'views/details.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
})
}])
我有兩個觀點。一個搜索視圖，其搜索藝術家姓名和細節圖，該提供detail.I是能夠解析搜索視圖中的數據並顯示result.I我無法顯示導致細節意見
Search.html
<div class="search-header">
<div class="container">
<div class="row">
<div class="col-md-12">
<form>
<h2 class="v-center">search</h2>
<p class="lead">APi search-You can search for artist,albums,tracks</p>
<div class="input-group">
<input type="text" ng-model="showname" class="form-control input-md" />
<span class="input-group-btn">
<button
type="button"
class="btn btn-md btn-warning pull-right"
ng-click="searchShow()">Search</button>
</span>
</div>
</form>
<div ng-if="children" class="results-block">
<div ng-repeat="child in children">
<div class="row">
<div class="col-md-3">
<img class=images ng-src="{{child.images[0].url}}" onerror="this.src='./placeholder.png'" />
</div>
<div class="row">
<div class="col-md-8">
<ul class="list-group">
<li class="list-group-item"><b>Name</b>: {{child.name }}</li>
<li class="list-group-item"><b>Type</b>: {{child.type}}</li>
<li class="list-group-item"><b>Popularity</b>: {{child.popularity}}</li>
<li class="list-group-item"> <button type="button" class="btn btn-link" ng-click="showDetails(child.id)"><a href="#details">Details</a></button></li>
</ul>
</div>
</div>
</div>
</div>
<hr>
<hr>
</div>
</div>
</div>
</div>
</div>
詳細
<div ng-repeat="detail in details">
<div class="row">
<div class="col-md-3">
<img class=images ng-src="{{detail.images[0].url}}" onerror="this.src='./placeholder.png'" />
</div>
<div class="row">
<div class="col-md-8">
<hello></hello>
<ul class="list-group">
<li class="list-group-item"><b>Name</b>: {{detail.name }}</li>
<li class="list-group-item"><b>Type</b>: {{detail.type}}</li>
<li class="list-group-item"><b>href</b>: {{detail.href}}</li>
<li class="list-group-item"> <button type="button" class="btn btn-link"><a href="#">Back</a></button></li>
</ul>
</div>
</div>
</div>
</div>
<hr>
<hr>
App.js編輯
var app = angular.module('angularjs-starter', ['jsonService', 'ngRoute', 'ngResource'])
app.controller('MainCtrl', function($scope, JsonService) {
//JsonService.get(function(data) {
// $scope.name = data.artists.href;
// $scope.children = data.artists.items;
//});
$scope.searchShow =() => {
JsonService.search.query({
show: $scope.showname
}, (response) => {
console.log(response);
// $scope.name = response.artists.href;
$scope.children = response;
})
}
$scope.showDetails = (id) => {
console.log(id);
JsonService.detail.get({
details: id
}, (response) => {
// console.log(response.data);
// $scope.name = response.artists.href;
$scope.details = response.data;
})
}
});
app.controller('DetailCtrl', function($scope, $http, $routeParams) {
var id = $routeParams.id;
console.log("Detail controller" + id);
JsonService.detail.get({
details: id
}, (response) => {
//console.log(response.data);
$scope.details = response.data;
})
});
app.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('')
}])
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/search.html',
controller: 'MainCtrl'
})
.when('/details', {
templateUrl: 'views/details.html',
controller: 'MainCtrl'
})
.when('/details/:id', {
templateUrl: 'views/details.html',
controller: 'DetailCtrl'
})
.otherwise({
redirectTo: '/'
})
}])
Service.js
angular.module('jsonService', ['ngResource'])
.factory('JsonService', function($resource) {
return {
search: $resource('/api/search'),
detail: $resource('/api/details')
}
});
routes.js-使用節點JS
const
express = require('express'),
path = require('path'),
router = express.Router(),
superagent = require('superagent')
module.exports =() => {
router.get('/api/search', (req, res) => {
const { show } = req.query // this is the same as const show = req.query.show
console.log(show);
superagent
.get('https://api.spotify.com/v1/search?q=' + show + ':&type=artist')
.end((err, response) => {
if (err) {
res.send(err);
console.log(err);
} else {
// console.log(response.body.artists.items);
res.json(response.body.artists.items);
}
})
})
router.get('/api/details', (req, res) => {
const { details } = req.query // this is the same as const show = req.query.show
console.log(details);
superagent
.get('https://api.spotify.com/v1/artists/' + details + '/albums')
.end((err, response) => {
if (err) {
res.send(err);
console.log(err);
} else {
res.json(response.body);
// console.log(response.body.items);
}
})
})
router.get('*', (req, res) => {
res.sendFile(path.join(__dirname, '../client/index.html'))
})
return router
}
編輯： 當我試圖安慰登錄$ scope.children正在恢復，其中爲$ scope.details返回undefined
您可以嘗試更改爲'$ scope.details = response.data' – Akashii
是否resp有沒有領域的「項目」？ –
是我做的，我能夠得到response.items控制檯日誌 – Ash