ユーザー入力は$ 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

主なエラーは、私はあなたが本当にinitのgetGamesを呼び出したい、または関数としてそれを使用するかどうかわからないんだけど、あなたの$watch

内$scope.gamesアサインが欠落しているです。

コントローラは完全にそれを見落としコードの複製

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