Question

我有一个rails api，它将默认输入发送到Angular应用程序。角度应用程序在localhost：9000 / api / query接收json，然后在localhost：9000 /＃/查询样式中接收json到无序列表的视图。

如果我发送POST请求（来自浏览器javascript调试器）到Rails应用程序，并且可以发送自定义输入并获得所需的输出作为json字符串。

$.get('http://rails-app-url:3000/api/query', { 'input': 'my input goes here}

我决定做什么用输入框构建表单，并给它一个运行该javascript post请求的ng-submit函数

<form ng-submit="sub()">
  <textarea name="my_input"></textarea>
  <button id="execute"></button>
</form>

在jquery脚本中定义sub（）函数，该脚本将查询变量设置为所需的json

$('#execute').click(function() {
  queries = $.get('http://url-to-rails-app:3000/api/query', { 'input': 'my input here' });
});

显示查询，我使用像这样的标记

<div ng-controller="QueryCtrl">
  <ul ng-repeat="query in queries">
    <li>{{query}}</li>
  </ul>
</div>

这有两个问题：

脚本不会执行，除非它与html一起内联写入此特定选项卡的视图。我无法将它附加到index.html，因为它找不到#execute按钮。
即使脚本与html内联编写，请求也会发送到服务器，但服务器的响应不会反映在html中。

Answer 1

使用ng-click

$scope.onSubmit = function() {
  queries = $http.get('http://url-to-rails-app:3000/api/query', { 'input': 'my input here' });
};

<form ng-submit="onSubmit()">
  <textarea name="my_input"></textarea>
  <input type="submit"/>
</form>

修改

根据评论

<form ng-submit="onSubmit()"> <textarea name="my_input"></textarea> <button type="submit" ng-click="onSubmit()"/> </form>

Answer 2

你可以这样做（并使用AngularJS的$ http）

<form>
  <textarea ng-model="my_input" name="my_input"></textarea>
  <button id="execute" ng-click="sub()">Execute</button>
</form>

在控制器中：

$scope.sub = function(){
    $http.get('http://url-to-rails-app:3000/api/query', {'input':$scope.my_input}).success(function(data){
       $scope.queries = data;
    }
}

我假设您的表单和显示列表位于同一个控制器中（共享相同的$ scope）。为什么你使用GET，我认为在这种情况下POST请求应该更好。

使用来自rails api的表单提交中的新数据重新填充Angular应用程序数据

2 个答案: