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

我有一个

input type=text

链接到

ng model=“queryText”

。现在，我编写了一个函数，从

queryText

构建一个url，然后是另一个函数，它接受这个url并调用外部（wikipedia）API

当我单击submit按钮（没有http get、没有响应、没有错误）时，不会发生任何事情，并且我无法确定是否正确地传递了参数。基本上我想做的是，当用户提交查询时，将

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>

这里有一个例子

---

感谢您的帮助

我已经编辑了您的代码笔，这是预期的行为吗：

变化：

searchArticle

现在位于$scope上，并调用

makeUrl

本身：

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

模板现在只调用

searchArticle（）

：

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

---

我对您的HTML做了如下更改：

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

---

这里有一个问题，您的代码中有多个错误

首先，删除

queryText

周围的单引号，因为您希望传递的是对象而不是原始字符串：

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

然后，您需要

searchArticle

和

makeUrl

可用于范围。因此，请使用：

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

而不是

var makeUrl = ...

这两个更改将使代码正常工作

这是一个工作代码笔：

---

您也可以简单地使用以下内容：

 ng-click="doStuff()"

并将

doStuff

定义为

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

---

这也会起作用。

您的

makeUrl

和

searchArticle

函数都没有设置在

$scope

上，您不需要在html中用单引号括起

queryText

（或者它只是运行“queryText”搜索）。它现在正在运行查询，但不会将数据返回到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.

---

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

HTML

---

这行吗？必须为searchArticle创建$scope函数。是的，在答案中添加了该函数并更新了链接

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

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.

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

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

  });
}());