Передача данных из службы AngularJS

Question

Уважаемый всех, у меня возникли проблемы с объемом моего объема или как его положить.

Я извлекаю данные из своей службы успешно, но у меня возникают проблемы с доступом к $ scope.players и $ scope.tournament, и я думаю, что это как-то связано с тем, что внутри вызова службы. Если я console.out() внутри вызова службы, все просто отлично. Как я могу получить доступ к данным, находящимся внутри служебного вызова.

Версия 1: Здесь консольный журнал просто не определен.

.controller('SelectCtrl', ['$scope','$stateParams', '$location', '$window','playerService','tournamentService', function ($scope, $stateParams, $location, $window, playerService, tournamentService) { 

    init(); 
    function init() { 

     playerService.getPlayers().then(function (data) { 
      $scope.players = []; 
      angular.forEach(data, function (player, index) { 
       $scope.players.push(player.info); 
      }); 
     }); 

     tournamentService.getTournaments().then(function (data) { 
      var result = data.filter(function (element) { 
       if (element.ID == $stateParams.id) { 
        return true; 
       } else { 
        return false; 
       } 
      }); 
      $scope.tournament = result; 
     }); 
    }; 

    console.log($scope.tournament);//undefined 
    console.log($scope.players); //undefined 
} 

Версия 2:, Здесь лог консоли просто констатирует Object {тогда: функция, загвоздка: функция, наконец: функция} который не то, что я wan't я хочу, чтобы данные были способный отобразить его на мой взгляд.

.controller('SelectCtrl', ['$scope','$stateParams', '$location', '$window','playerService','tournamentService', function ($scope, $stateParams, $location, $window, playerService, tournamentService) { 

    init(); 
    function init() { 

     $scope.players = playerService.getPlayers().then(function (data) { 
      $scope.players = []; 
      angular.forEach(data, function (player, index) { 
       $scope.players.push(player.info); 
      }); 
     }); 

     $scope.tournament = tournamentService.getTournaments().then(function (data) { 
      var result = data.filter(function (element) { 
       if (element.ID == $stateParams.id) { 
        return true; 
       } else { 
        return false; 
       } 
      }); 
      $scope.tournament = result; 
     }); 
    }; 

    console.log($scope.tournament);//Object {then: function, catch: function, finally: function} 

    console.log($scope.players);//Object {then: function, catch: function, finally: function} 

} 

Ваша помощь очень ценится!

услуг:

.factory('playerService', function ($http,$q) { 
    return { 
     getPlayers: function() { 
      //return the promise directly. 
      var deferred = $q.defer(); 
      $http.get(webServiceUrl + 'api/Player/GetAllPlayers') 
         .success(function (data) { 
          //resolve the promise as the data 
          deferred.resolve(data); 
         }).error(function() { 
          deferred.reject(); 
         }); 
      return deferred.promise; 
     } 
    } 

}) 

.factory('tournamentService', function ($http,$q) { 
    return { 
     getTournaments: function() { 
      //return the promise directly. 
      var deferred = $q.defer(); 
      $http.get(webServiceUrl + 'api/Tournament/GetAllTournaments') 
         .success(function (data) { 
          //resolve the promise as the data 
          deferred.resolve(data); 
         }).error(function() { 
          deferred.reject(); 
         }); 
      return deferred.promise; 
     } 
    } 

}) 

часть вида:

<h1 style="display: inline-block; margin-left:15px;">Enter <i>{{tournament.Name}}</i></h1> 
     <div class="row"> 
      <div class="selectinforow"> 
       <div class="col-xs-2 selectinfo"> 
        <span>{{tournament.EntryFee}}$</span></br> 
        <span>Entry Fee</span> 
       </div> 
       <div class="col-xs-2 selectinfo"> 
        <span>{{tournament.Entries}}</span></br> 
        <span>Entries</span> 
       </div> 
       <div class="col-xs-2 selectinfo"> 
        <span>{{tournament.Size}}</span></br> 
        <span>Max Size</span> 
       </div> 
       <div class="col-xs-2 selectinfo"> 
        <span>{{tournament.StartTime}}</span></br> 
        <span>Start Date</span> 
       </div> 
       <div class="col-xs-2 selectinfo"> 
        <span>{{tournament.Entryfee*tournament.Entries}}$</span></br> 
        <span>Winnings</span> 
       </div> 
      </div> 
     </div> 

Answer 1

Так что, если вы внимательно прочитать код вы заметите, вы используете обещание на следующей строке:

tournamentService.getTournaments().then(function (data) { 
    // [your data is set here - AFTER the service call runs] 
} 

// [your print is here - run BEFORE service call runs] 

Ключ к "тогда" что он не выполняется сразу, а запускается, когда данные возвращаются из служебного вызова. Другими словами, у вас есть печать в неправильном месте - я ожидал бы, что значения там не определены. Если вы переместите операторы console.log в обещание (тогда), я ожидаю увидеть действительные значения. Вы также можете поместить точку останова в отладчике браузера, чтобы увидеть значения в функции «then», если вы хотите проверить, что все работает. Надеюсь, это ставит вас на правильный путь!

EDIT

После того, как обещание завершается, угловатый автоматически обновляет вид. Допустим, у вас есть следующие в вашей точки зрения (только пример):

<h1 ng-bind="tournament.Title">Default Text</h1> 

При загрузке вид/страницы вы увидите «Default Text». По завершении обещания, если турнир был загружен, угловое будет автоматически обновлять «h1», чтобы теперь иметь название для этого турнира. Это происходит потому, что угловой автоматически запускает «$ apply()» после того, как обещание завершено.

Answer 2

Ваш код выполнен до ответа promise.

Если вам нужно ввести код «процедурно», вы должны указатьпеременную области видимости, как показано ниже, для обнаружения любых изменений..

Например:

$scope.$watch('tournament', function() { 
console.log($scope.tournament); 
}, true);