HTTP-запрос в Angular

Question

Я пытаюсь изо всех сил сделать api-звонки с Angular js. К сожалению, у меня, похоже, есть проблемы. Я пытаюсь передать имя героя в поле формы и использовать эту информацию для беседы с моим backend 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> 

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