Angular 中的 HTTP 请求答案

【问题标题】：HTTP request in AngularAngular 中的 HTTP 请求
【发布时间】：2016-09-18 23:01:38
【问题描述】：

我正在尝试使用 Angular js 进行 api 调用。不幸的是，我似乎遇到了一些麻烦。我正在尝试将英雄名称传递到表单字段并使用该信息与我的后端 api 进行对话。不幸的是，当我尝试联系时，我没有收到任何回复数据。有关如何成功拨打电话的任何提示？

这是控制器。

vm.errorMsg = '';

vm.hero = '';

function getCharacter(hero) {
    $http({
        method: "GET",
        data: {
            format: 'json'
        },
        url: "localhost:8080/character/heroByName/" + hero
    }).then(function mySuccess(response){
        vm.hero = response.data;
        console.log(vm.hero);
    }, function myError(response){
        vm.errorMsg = response.statusText;
        console.log(vm.errorMsg);
    });
}

这是表单域，您可以在其中输入英雄名称。

<div class="container">
  <h2>{{character.title}}</h2>
  <div class="row">
    <div class="col-md-8 col-md-offset-2">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Wolverine" ng-model="character.hero">
        <span class="input-group-btn">
        <button class="btn btn-default" type="submit" ng-click="character.getCharacter(character.hero)">Go!</button>
        </span>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

在浏览器中打开调试工具并显示实际错误。第二个 ng-click="character.getCharacter(character.hero)" - 角色是控制器吗？

标签： javascript angularjs ajax forms

【解决方案1】：

您应该通过将您的函数分配给vm.getCharacter 来将其公开给范围。之后你可以通过ng-click="vm.getCharacter(character.hero)"在你的模板中调用它。

控制器

vm.errorMsg = '';
vm.hero = '';
vm.getCharacter = getCharacter;

function getCharacter(hero) {
    $http({
        method: "GET",
        data: {
            format: 'json'
        },
        url: "localhost:8080/character/heroByName/" + hero
    }).then(function mySuccess(response){
        vm.hero = response.data;
        console.log(vm.hero);
    }, function myError(response){
        vm.errorMsg = response.statusText;
        console.log(vm.errorMsg);
    });
}

模板

<button class="btn btn-default" type="submit" ng-click="vm.getCharacter(character.hero)">Go!</button>

【讨论】：