angularjs. Показать свойство объекта после http.get

Я новичок в Angular.js, и я сделал учебник Shaping up with angularjs в codeschool.com, поэтому, пожалуйста, простите меня, если проблема, которую я пытаюсь решить, может быть слишком простой в разрешении.angularjs. Показать свойство объекта после http.get

Итак, я просто пытаюсь показать данные, которые я получаю от $http.get(), который является объектом JSON в моем документе.

index.html:

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>League of legends</title> 

    <!-- Load StyleSheets --> 
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> 

    <!-- Load Javascript Libraries --> 
    <script type="text/javascript" src="js/jquery.min.js"></script> 
    <script type="text/javascript" src="js/bootstrap.min.js"></script> 
    <script type="text/javascript" src="js/angular.min.js"></script> 
    <script type="text/javascript" src="js/app.js"></script> 
</head> 
<body ng-app="LeagueOfLegends"> 
    <!-- Navbar menu --> 
    <nav class="navbar navbar-default"> 
     <div class="container-fluid"> 
      <div class="collapse navbar-collapse"> 
       <ul class="nav navbar-nav"> 
        <li> 
         <a href="#">About</a> 
        </li> 
        <li> 
         <a href="#">Contact</a> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </nav> 
    <div class="container"> 
     <div ng-controller="searchSummoner as summoner"> 
      <!-- Search Form --> 
      <div ng-show="summoner.status.showSearch"> 
       <form ng-submit="summoner.search()"> 
        <div class="well"> 
         <div class="form-group"> 
          <label for="summonerName">Summoner Name</label> 
          <input type="text" class="form-control" placeholder="Enter Summoner Name" id="summonerName" ng-model="summoner.form.name"> 
         </div> 
         <div class="form-group"> 
          <label ng-repeat="region in summoner.region"> 
           <input type="radio" ng-model="summoner.form.region" ng-value="region">{{region}} 
          </label> 
         </div> 
         <input type="submit" class="btn btn-default" value="Search"></input> 
        </div> 
       </form> 
      </div> 
      <p ng-show="summoner.status.showResult">Get request from: {{summoner.data.name}}</p> 
     </div> 
    </div> 
</body>

app.js (модуль-контроллер):

var app = angular.module('LeagueOfLegends', []); 

app.controller('searchSummoner', ['$http', function($http) 
{ 
    var form = {}; 
    this.data = {}; 

    this.form = {}; 
    this.status = { 
     showSearch: true, 
     showResult: false 
    }; 

    this.region = ['br', 'eune', 'euw', 'lan', 'las', 'na', 'oce', 'kr', 'tr']; 

    this.search = function() 
    { 
     form = this.form; 

     this.form = {}; 

     // get data from the api rest 
     $http.get(getApiUrl(form)).success(function(data){ 
      this.data = data[form.name]; 
      console.log(this.data); 
     }); 

     // hide form 
     this.status.showSearch = false; 
     this.status.showResult = true; 
    }; 
}]); 

function getApiUrl(form) 
{ 
    var apiKey = 'fe9eb24f-5800-4f2a-b570-15328062b341'; 

    return 'https://lan.api.pvp.net/api/lol/' + form.region + '/v1.4/summoner/by-name/' + form.name + '?api_key=fe9eb24f-5800-4f2a-b570-15328062b341' 
}

после $http.get успешно сделал, я сделать журнал просто проверить, если данные я получить это тот, который мне нужен, но он не показывает свойство объекта в html

источник

2014-12-18 nosthertus

Вы используете this в неправильном закрытии. Это то, что вы должны сделать:

var that = this;//give controller scope access 

// get data from the api rest 
$http.get(getApiUrl(form)).success(function(data){ 
    that.data = data[form.name]; 
    console.log(that.data); 
});

источник

2014-12-19 00:01:31 topheman

я не совсем понимаю. но похоже, что он работает таким образом, и я должен использовать его, я просто не вижу, как объявление переменной с именем с этим значением будет делать это – nosthertus

«этот», который вы использовали, был одним из успешных обратных вызовов а не один из ваших контроллеров, поэтому присвоение 'this.data = ...' внутри обратного вызова не завершилось в атрибуте данных вашего контроллера – topheman

ow. я не знал, что «это» ссылается на функцию обратного вызова успеха, спасибо за ваше объяснение – nosthertus

Вы также можете связать свой контекст так:

$http.get(getApiUrl(form)).success(function(data){ 
    this.data = data[form.name]; 
    console.log(this.data); 
}.bind(this));

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

источник

2014-12-19 00:52:33 garbanzio

angularjs. Показать свойство объекта после http.get

ответ

Смежные вопросы