Пользовательский ввод не привязан к $ scope. $ Watch

Question

Только начав с 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>

Извинения для любого неправильного формата и большое спасибо за любую помощь!

Answer 1

Основная ошибка, вам не хватает $scope.games Назначают внутрь вашего $watch

Я не уверен, действительно ли вы хотите позвонить getGames по инициализации, или собираетесь использовать его в качестве функции.

Контроллер может быть реорганизованы для уменьшения кода репликации

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) 
     }) 
    } 
};