Question

我有input type=text与ng-model="queryText"相关联。现在我编写了一个函数来构建来自queryText的url，然后是另一个获取此url并调用外部（维基百科）API的函数。

单击提交按钮时没有任何反应（没有http获取，没有响应，没有错误），我无法弄清楚我是否正确传递了我的参数。基本上我想做的是，当用户提交查询时，将makeUrl()函数的结果传递给searchArticle()。

我的HTML：

<div ng-app="wikiView">
  <div ng-controller="wikiController">
    <form novalidate>
      <input type=text ng-model="queryText">
      <input type="submit" ng-click="searchArticle(makeUrl('queryText'))" value="search">
    </form>
    {{ articles }}
    {{ error }}
  </div>
</div>

我的应用：

(function() {
  var wikiView = angular.module('wikiView', []);

  wikiView.controller('wikiController', function($scope, $http) {

    var onArticleReceived = function(response) {
      $scope.articles = response;
    }

    var onArticleError = function(reason) {
      $scope.error = reason;
    }

    $scope.queryText = "";

    var makeUrl = function(searchTerm) {
      return 'https://en.wikipedia.org/w/api.php?action=query&format=json&maxlag=10&prop=&list=&meta=&titles=' + searchTerm;
    }

    var searchArticle = function(url) {
      $http.get(url)
        .then(onArticleReceived, onArticleError);
    }

  });
}());

这是事情的codepen。

感谢您的帮助

Answer 1

您的代码中有多处错误。

首先，删除queryText周围的单引号，因为您要传递对象而不是原始字符串：

 ng-click="searchArticle(makeUrl(queryText))"

然后，您需要searchArticle和makeUrl可用范围。所以，使用：

 $scope.makeUrl = function(){...}

而不是

var makeUrl = ...

这两项更改将使您的代码正常工作。

这是一个有效的代码图：http://codepen.io/anon/pen/OMKXoz

您也可以使用以下内容：

 ng-click="doStuff()"

并将doStuff定义为

  $scope.doStuff = function(){
      searchArticle(makeUrl($scope.queryText));
  }

也可以。

Answer 2

我已编辑过您的codepen，这是预期的行为：http://codepen.io/anon/pen/EPqyRx

的变化：

searchArticle现在位于$ scope并且调用makeUrl本身：

$scope.searchArticle = function(searchTerm) {
    var url = makeUrl(searchTerm);
    $http.get(url)
    .then(onArticleReceived, onArticleError);
}

模板现在只调用searchArticle()：

ng-click="searchArticle('queryText')" value="search">

Answer 3

我对 HTML 进行了一些更改，如下所示：

element.find(".add-button")

并在 AngularJS

中

  <input type=text ng-model="queryText">
  <input type="submit" ng-click="searchArticle(makeUrl())" value="search">

这是DEMO

Answer 4

您的makeUrl和searchArticle功能都未设置在$scope上，并且您不需要在html中使用单引号queryText（或否则它只是搜索＆＃39; queryText＆＃39;）。 Forked codepen here。它现在正在运行查询，但它不会将数据返回到codepen，因为：

XMLHttpRequest cannot load https://en.wikipedia.org/w/api.php?action=query&format=json&maxlag=10&prop=&list=&meta=&titles=habit. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.codepen.io' is therefore not allowed access.

Answer 5

您只需将函数附加到$ scope对象即可。这是修复后的完整HTML和JS。为了简化我已经删除了makeURL函数并直接在searchArticle函数中添加了URL

HTML

<div ng-app="wikiView">
  <div ng-controller="wikiController">
    <form novalidate>
      <input type=text ng-model="queryText">
      <input type="submit" ng-click="searchArticle()" value="search">
    </form>
    {{ articles }}
    {{ error }}
  </div>
</div>

JS

(function() {
  var wikiView = angular.module('wikiView', []);

  wikiView.controller('wikiController', function($scope, $http) {

    var onArticleReceived = function(response) {
        $scope.articles = response;
    }

    var onArticleError = function(reason) {
        $scope.error = reason;
    }

    $scope.queryText = "";

    $scope.searchArticle = function(url) {

        $http.get('https://en.wikipedia.org/w/api.php?action=query&format=json&maxlag=10&prop=&list=&meta=&titles=' + $scope.queryText)
             .then(onArticleReceived, onArticleError);
    }

  });
}());

angularJS将$ scope变量传递给ng-click函数

5 个答案: