Question

刚刚开始使用Angular，我花了最近两天的时间试图弄清楚如何通过服务绑定新搜索中的数据。在使用服务之前，我使用以下代码进行了搜索：

SearchController.js

＆＃13;

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>

＆＃13;

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

＆＃13;

所以我的第一次尝试是成功的，但是当我尝试将代码移动到服务时，我无法自动更新并绑定新搜索中的数据。我已尝试使用$ scope。$ watch我可以在控制台中看到网址更改但结果不会填充在我的search.html中。以下是新的变化。

＆＃13;

<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>

＆＃13;

class base
{
protected:
    int _a;
    int _b;
    int _c;;
    base(int b, int c);
};

class sub_one : public virtual base
{
public:
    sub_one(int a, int b) : base(a, b)
    {
        // do some other things here
    }

    // other members
};


class sub_two : public virtual base
{
protected:
    int _d;
public:
    sub_two(int a, int b, int c = 0) : base(a, b) 
    {
        // do something
    }

    // other members
};


class sub_three : public sub_one, public sub_two
{
private:
    bool flag;
public:
    sub_three(int a, int b, int c = 0) : base(a, b) 
    {
        // do something    
    }
};

＆＃13;

对任何错误的格式表示抱歉，非常感谢您的帮助！

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

用户输入没有绑定$ scope。$ watch

1 个答案: