AngularJS - поиск в реальном времени на основе API не будет обновляться при изменении модели ng

Я новичок в angular, и я начинаю бороться с этой кривой обучения.

Я работаю над Zipline FreeCodeCamp, чтобы создать приложение для поиска в Википедии. Одной из необходимых функций является поиск в реальном времени с предложениями названий статей, но я не могу заставить его работать.

Я создал фабрику для вызова вики-API. Фабрика сработает только один раз и не будет обновляться при внесении каких-либо изменений в поле поиска. Я предполагаю, что это не работает, потому что фабрика не вызывается, когда в поле ввода вносятся изменения, но все, что я пытался исправить, похоже, не работает.

HTML

<section id="container" ng-app="wikiSearch" ng-controller="searchPanel" class="center">
  <h1>Wikipedia Viewer</h1>
  <input id="search" type="text" placeholder="search" ng-model="searchTerm" ng-model-options="{debounce: 300}"/>
  <section id="results"><a href="#" target="_blank" class="wiki-entry"> </a>
    <!-- test code-->
    <div>{{searchTerm}}</div>
    <div>{{titleSearch}}</div>
  </section>
</section>

JavaScript

var app = angular.module('wikiSearch', []);

app.controller('searchPanel', [ '$scope', 'API', function ($scope, API) {
  $scope.searchTerm = 'einstein';
  $scope.titleSearch = {};
  $scope.searchResults = {};

  var api_base = "https://en.wikipedia.org/w/api.php?";
  var fullParams = "format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=30&prop=extracts&exintro&explaintext&exsentences=2&exlimit=max&gsrsearch="
  //var titles = "format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=8&gsrsearch="
  var callback = "&callback=JSON_CALLBACK"

  API.search(api_base + fullParams + $scope.searchTerm + callback).success(function (data) {
    $scope.titleSearch = data;
  });

}]);


app.factory('API', [ '$http', function ($http) {
  return {
    search: function(targetUrl) {
      console.log(targetUrl);
      return $http.jsonp(targetUrl);
    }
  }
}]);

Вот исходный код, на который можно посмотреть: Проект Codepen.

Вы можете видеть, что любые изменения в поле поиска не приводят к каким-либо изменениям в возвращаемых данных json. Фабрика вызывается только один раз.

У меня нет большого понимания того, как работает angular, но я предполагал, что фабрика будет обновляться в области действия с каждым изменением, внесенным в поле ввода. Очевидно, я ошибаюсь, но я хотел бы точно знать, почему и как это исправить.


javascript angularjs mediawiki-api angularjs-ng-model
person BlindPrimate    schedule 17.07.2015    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Проблема с вашим кодом заключается в том, что вы не запускаете вызов API при изменении ввода поиска. Вам нужно прослушать событие change в текстовом поле и запустить вызов API, как показано ниже.

HTML

    <input id="search" type="text" ng-change="update()" placeholder="search" 
  ng-model="searchTerm" ng-model-options="{debounce: 300}" />

Контроллер

$scope.update = function(){

   API.search(api_base + fullParams + $scope.searchTerm +callback)
      .success(function (data) {
         $scope.titleSearch = data;
      });

}

Вот ваш обновленный форк CodePen с указанными выше изменениями.

person Arkantos    schedule 17.07.2015
comment
Это лучше, чем добавление часов для searchTerm. - person Igwe Kalu; 17.07.2015
comment
Честно говоря.. Я даже не думал о добавлении наблюдателя для чего-то простого :) - person Arkantos; 17.07.2015
comment
В другом ответе ниже предложено точно использовать $watch. Я удалил этот ответ, чтобы помочь ОП признать его правильным. - person Igwe Kalu; 17.07.2015
comment
Я знал, что это будет что-то очень простое. Я пробовал что-то подобное, прежде чем спрашивать, но, должно быть, я перепутал синтаксис или что-то в этом роде. Спасибо! - person BlindPrimate; 17.07.2015
comment
Если это решит вашу проблему, отметьте это как ответ :) - person Arkantos; 17.07.2015

arrow_upward
0
arrow_downward

Вам нужно добавить событие, чтобы проверить, изменилось ли поле поиска. Я предлагаю использовать ngChange.

нефрит

input#search(type='text' placeholder = "search" ng-model="searchTerm" ng-change='search()' ng-model-options="{debounce: 300}")

JS

     $scope.search = function () {
  API.search(api_base + fullParams + $scope.searchTerm + callback).success(function (data) {
    $scope.titleSearch.data = data;
    console.log($scope.titleSearch);
  });
 }

 $scope.search()

Проверьте codepen.

person Kishor Sharma    schedule 17.07.2015