AngularJS - 基于 API 的实时搜索不会随着 ng-model 的变化而更新答案

【问题标题】：AngularJS - API-based live search won't update with ng-model changeAngularJS - 基于 API 的实时搜索不会随着 ng-model 的变化而更新
【发布时间】：2015-07-17 17:28:10
【问题描述】：

我是 Angular 的新手，我开始在学习曲线上挣扎。

我正在通过 FreeCodeCamp Zipline 制作一个维基百科搜索应用程序。需要的功能之一是带有文章标题建议的实时搜索，但我似乎无法让它工作。

我创建了一个工厂来进行 wiki 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 Project

您可以看到，对搜索字段的任何更改都不会对返回的 json 数据产生任何更改。工厂只被调用一次。

我对 Angular 的工作原理不是很了解，但我的假设是，每次对输入字段进行更改时，工厂都会在范围内更新。显然，我错了，但我很想知道确切的原因以及如何解决它。

【问题讨论】：

标签： javascript angularjs mediawiki-api angularjs-ng-model

【解决方案1】：

您的代码的问题是您没有在更改搜索输入时触发 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 fork，其中包含上述更改。

【讨论】：

这比为 searchTerm 添加监视要好。
老实说.. 我什至没有想过为简单的事情添加一个观察者:)
下面的另一个答案建议完全使用$watch。我将这个答案连根拔起，以帮助 OP 将其识别为正确的答案。
我知道这将是一件非常简单的事情。在询问之前我曾尝试过这样的事情，但我一定搞砸了语法或其他东西。谢谢！
如果这解决了您的问题，请将其标记为答案:)

【解决方案2】：

您需要添加事件以检查搜索字段是否已更改。我建议使用ngChange。

翡翠

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

     $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

【讨论】：