用戶輸入未綁定$ 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

裏面我不知道你是否真的想呼籲的init 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) 
     }) 
    } 
};