Как сохранить данные по области на угловом заводе

Question

Я изучаю Ионный, и я делаю учебник. Все было нормально, пока я не создал фабрику, которая обратилась к веб-сервису.

Когда я обращаюсь к переменным в области, они не определены или они просто похожи на то, как я инициализировал переменную.

Это код

Controller.js

angular.module('songhop.controllers', ['ionic', 'songhop.services']) 

/*Controller for the discover page*/ 
    .controller('DiscoverCtrl', function($scope, $timeout, User, Recommendations) { 
     // get our first songs 
     Recommendations.getNextSongs() 
     .then(function(){ 
      $scope.currentSong = Recommendations.queue[0]; 
      console.log($scope.currentSong); 
     }); 

     console.log(Recommendations.queue); 
     console.log($scope.currentSong); 
     // Fired when a song is favorited or skiped 
     $scope.sendFeedback = function (bool){ 
    Recommendations.nextSong(); 

    // First add to favorites if they favorited 
    if (bool) User.addSongToFavorites($scope.currentSong); 

    $scope.currentSong.rated = bool; 
    $scope.currentSong.hide = true; 

    $timeout(function() { 
     $scope.currentSong = Recommendations.queue[0]; 
    }, 250); 
    }; 

}) 


/* 
Controller for the favorites page 
*/ 
.controller('FavoritesCtrl', function($scope, User) { 
    // get the list of our favorites from the user service 
    $scope.favorites = User.favorites; 

    $scope.removeSong = function(song, index) { 
    User.removeSongFromFavorites(song, index); 
    }; 
}) 

Service.js

angular.module('songhop.services', []).factory('User', function() { 

    var o = { 
    favorites: [] 
    } 


    o.addSongToFavorites = function(song){ 
    // Make sure there is a song to add 
    if (!song) return false; 

    // Add to favorites array 
    o.favorites.unshift(song); 
    } 

    o.removeSongFromFavorites = function(song, index) { 
    // make sure there is a song to remove 
    if (!song) return false; 

    // remove to favorites array 
    o.favorites.splice(index, 1); 
    } 

    return o 
}) 

.factory('Recommendations', function($http, SERVER) { 
    var p = { 
    queue: [] 
    }; 

    p.getNextSongs = function() { 
    return $http({ 
     method: 'GET', 
     url: SERVER.url + '/recommendations' 
    }).success(function(data){ 
     // merge data into the queue 
     p.queue = p.queue.concat(data); 
    }); 
    }; 

    p.nextSong = function() { 
    // pop the index 0 off 
    p.queue.shift(); 

    // low on the queue? lets fill it up 
    if (p.queue.length <= 3) { 
     p.getNextSongs(); 
    } 

    }; 
    return p; 

}) 

В строках console.logs, что я сделал для тестирования, я получаю правильные данные в первом. Второй - [], а третий - неопределенный.

Я не понимаю, почему

$scope.currentSong = Recommendations.queue[0]; 

не устанавливает переменную $ scope.currentSong на то, что он должен, так как $ область видимости переменных должна быть глобальной, не так ли?

Answer 1

Второй и третий журнал консоль не возвращает вам какое-либо данные, так как они выполняются перед тем обещания возвращенного Recommendations.getNextSongs() рассосались.

Первое показывает данные, потому что вы правильно разместили их в блоке, который будет выполняться только тогда, когда обетование будет разрешено. То есть когда метод Рекомендации.getNextSongs() закончен.

Если вы обновили свой код, как показано ниже, каждая консоль будет регистрировать что-то:

Recommendations.getNextSongs() 
     .then(function(){ 
      $scope.currentSong = Recommendations.queue[0]; 
      console.log($scope.currentSong); 
      console.log(Recommendations.queue); 
       console.log($scope.currentSong); 
     });