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

Нов съм в angular и започвам да се боря с тази крива на обучение.

Проправям си път през FreeCodeCamp Zipline, за да направя приложение за търсене в wikipedia. Една от необходимите функции е търсене на живо с предложения за заглавия на статии, но изглежда не мога да го накарам да работи.

Създадох фабрика за извикване на API на wiki. Фабриката ще работи само веднъж и няма да се актуализира, когато се направят промени в полето за търсене. Предполагам, че не работи, защото фабриката не се извиква, когато са направени промени в полето за въвеждане, но всичко, което се опитах да поправя, изглежда не работи.

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="/bg#" 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, който можете да разгледате: Codepen Project

Можете да видите, че всички промени в полето за търсене не водят до никакви промени в върнатите 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. Изкорених този отговор, за да помогна на OP да го разпознае като правилен. - 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