用户输入未从$ scope。$ watch绑定

Question

Just getting started with Angular and I've spent the last 2 days trying to figure out how to bind data from a new search through a service. I had the search working before with the following code before using a service:

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> 

So my first attempt was successful but when I tried to move the code to a service I am unable to automatically update and bind the data from the new search. I've tried to use $scope.$watch and I can see the url change in the console but the results do not populate in my search.html. Below are the new changes.

 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> 

Apologies for any wrong format and many thanks for any help!

Answer 1

The primary error is you are missing the $scope.games assign inside your $watch

I'm not sure whether you really want to call getGames on init, or intend to use it as a function.

The controller can be reorganized to reduce code replication

function SearchController($scope, $http, GetGameService){

  $scope.search = ""

  // getGames(); // if you need to call on init, call here

  $scope.$watch('search', function(){
    getGames();
  })

  function getGames() {
    return GetGameService.getGames($scope.search)
      .then(function(resp){ // it's better to use .then than .success
        $scope.games = resp
        console.log(resp)

      }, function(data){
        console.log(data)
      })
  }
};