0
剛開始使用Angular,我花了最近2天的時間試圖找出如何通過服務綁定新搜索的數據。我有搜索用下面的代碼工作之前使用服務前:
SearchController.js
function SearchController($scope, $http){
$scope.search = ""
$scope.getGames = function(){
return $http.get("https://igdbcom-internet-game-database-v1.p.mashape.com/games/?fields=name%2Crating%2Ccover%2Curl%2Csummary%2Cfirst_release_date&limit=50&offset=0&order=release_dates.date%3Aasc&search=" + $scope.search, {"headers": {
"x-mashape-key": "KEY",
"accept": "application/json",
}
})
.success(function(resp){
$scope.games = resp
})
.error(function(data){
console.log(data)
})
}
$scope.getGames()
};
SearchController.$inject = ['$scope', '$http']
angular
.module('app')
.controller('SearchController',SearchController)
search.html
<div class="container">
<div ng-controller="SearchController">
<div class="col-md-6 col-md-offset-4">
<h1>Search for Game</h1>
<form name="form">
<input name="search" ng-model="search" ng-change="getGames()"
ng-model-options="{debounce: 1000}" placeholder="Type Game"
minlength="3"
required="required" />
<div ng-messages="form.search.$error" ng-if="form.search.$touched">
<div ng-message="required">Please type a game to search.</div>
<div ng-message="minlength">3 characters required</div>
</div>
</form>
</div>
<div class="row fix-heights">
<div class="col-md-6" ng-repeat="game in games | filter: search" class="row-eq-height">
<br>
<div class="media">
<div class="media-left">
<img class="pull-left" src="https://res.cloudinary.com/igdb/image/upload/t_thumb/{{ game.cover.cloudinary_id }}.jpg">
</div>
<div class="media-body">
<p>Title: <a href="{{game.url}}">{{ game.name }}</a></p>
<p>Release Date: {{ game.first_release_date | date:'mediumDate'}}
<p>Short Description: {{ game.summary }}</p>
</div>
</div>
</div>
</div>
</div>
</div>
所以我的第一次嘗試是成功的,但是當我試圖移動代碼我無法自動更新和綁定新搜索中的數據。我試圖使用$ scope。$ watch,我可以看到控制檯中的URL更改,但結果不會填充到我的search.html中。以下是新的變化。
function SearchController($scope, $http, GetGameService){
$scope.search = ""
search = $scope.search
GetGameService.getGames(search)
.success(function(resp){
$scope.games = resp
console.log(resp)
})
.error(function(data){
console.log(data)
})
$scope.$watch('search', function(){
search = $scope.search
GetGameService.getGames(search)
})
};
SearchController.$inject = ['$scope', '$http', 'GetGameService']
angular
.module('app')
.controller('SearchController',SearchController)
/////////GetGameService.js
function GetGameService($http){
this.getGames = function(search) {
return $http.get("https://igdbcom-internet-game-database-v1.p.mashape.com/games/?fields=name%2Crating%2Ccover%2Curl%2Csummary%2Cfirst_release_date&limit=50&offset=0&order=release_dates.date%3Aasc&search=" + search, {"headers": {
"x-mashape-key": "KEY",
"accept": "application/json",
}
})
}
}
GetGameService.$inject = ["$http"]
angular
.module('app')
.service("GetGameService", GetGameService);
<div class="container">
<div ng-controller="SearchController">
<div class="col-md-6 col-md-offset-4">
<h1>Search for Game</h1>
<form name="form">
<input name="search" ng-model="search"
ng-model-options="{debounce: 1000}" placeholder="Type Game"
minlength="3"
required="required" />
<div ng-messages="form.search.$error" ng-if="form.search.$touched">
<div ng-message="required">Please type a game to search.</div>
<div ng-message="minlength">3 characters required</div>
</div>
</form>
</div>
<div class="row fix-heights">
<div class="col-md-6" ng-repeat="game in games | filter: search" class="row-eq-height">
<br>
<div class="media">
<div class="media-left">
<img class="pull-left" src="https://res.cloudinary.com/igdb/image/upload/t_thumb/{{ game.cover.cloudinary_id }}.jpg">
</div>
<div class="media-body">
<p>Title: <a href="{{game.url}}">{{ game.name }}</a></p>
<p>Release Date: {{ game.first_release_date | date:'mediumDate'}}
<p>Short Description: {{ game.summary }}</p>
</div>
</div>
</div>
</div>
</div>
</div>
道歉對任何錯誤的格式,並非常感謝您的幫助!
完全忽略這一點。做出了改變,它的工作完美!感謝您一起清除我的頭痛。 – digitalh2o