我應該創建一個.factory以將變量的值共享給兩個ajax請求嗎？

Question

使用angularjs我做了兩個ajax json請求，第一個請求是檢索頻道的在線/離線狀態，第二個ajax json請求是針對頻道的信息（標識，名稱，狀態等）。

我將變量信號分配給'data.stream'，它是在json請求之間共享信號的通道的在線/離線狀態。在Google Developer Console中，我收到的值爲null。我在這裏做了一些研究http://www.ng-newsletter.com/posts/beginner2expert-services.html，發現使用服務可能是一個解決方案。我遵循指示，但我仍然無法獲得json請求識別信號的範圍。

我讀過可以使用rootcope，但不推薦，不知道這是多麼真實，因爲一個新手使用角度，但我想通過應用最佳實踐開始我的角度旅程。

回顧：使用Angular Ajax創建一個jsonp請求來抽動api，我提出了兩個請求來檢索我的streamers數組中的通道的在線/離線狀態，另一個ajax json請求是獲取通道的信息，並且我需要在ajax jsonp請求之間看到已賦值data.stream的變量信號的作用域。請讓我知道這是否合乎邏輯，或者我是否「再次環遊世界」。

這裏是一個plunker：plnkr.co/edit/6sb39NktX7CwfnQFxNNX

// creating a service for signal ?  
app.factory('signal', function() { 
       var signal = {}; 

       return signal; 
      }) 

      // declaring my TwitchController and dependencies 
      app.controller('TwitchController', ['$scope', '$http', 'signal', function($scope, $http, signal) { 
       // streamers array with array of channels 
       var streamers = ["freecodecamp", "storbeck", "terakilobyte", "habathcx", "RobotCaleb", "thomasballinger", "noobs2ninjas", "beohoff", "medrybw"]; 

       $scope.imgs; 
       $scope.signal = signal; 

       var self = this; 

       //empty array 
       self.info = []; 
       for (var i = 0; i < streamers.length; i++) { 
        var url = "https://api.twitch.tv/kraken/channels/"; 
        var streamUrl = "https://api.twitch.tv/kraken/streams/"; 
        var callback = "/?callback=JSON_CALLBACK"; 
        //json ajax request for channels online and offline status 
        $http.jsonp(streamUrl + streamers[i] + callback).success(function(data) { 

         //provides status of shows online and offline 
         signal = data.stream; 
         console.log(signal) 

        }); 
        // json ajax request for channels and channel's info 
        $http.jsonp(url + streamers[i] + callback).success(function(data) { 
         // if channel does not have a logo image, this jpg will be the placeholder 
       // if statement test channel status (online or offline) 
         if (!signal) { 
          signal = "offline"; 
         } else if (signal) { 
          signal = 'online'; 
         } 

         // pushing retreive data from twitch.tv into array self.info 
         self.info.push(data); 

        }); 

Answer 1

您的問題這裏是異步調用$ HTTP。你需要使用$ http.then並鏈接承諾。你不需要這個實例的工廠，但最好有一個只返回你的信息對象的實例。我不知道你想要的格式，所以我創建了一個。這裏是蹲點：http://plnkr.co/edit/ecwk0vGMJCvkqCbZa7Cw?p=preview

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

// declaring my TwitchController and dependencies 
    app.controller('TwitchController', ['$scope', '$http', function($scope, $http) { 

    // streamers array with array of channels 
    var streamers = ['freecodecamp', 'storbeck','terakilobyte', 'habathcx', 'RobotCaleb', 'thomasballinger', 'noobs2ninjas', 'beohoff', 'medrybw' ]; 

    //empty array 
    $scope.info = []; 

    var url = 'https://api.twitch.tv/kraken/channels/'; 
    var streamUrl = 'https://api.twitch.tv/kraken/streams/'; 
    var callback = '/?callback=JSON_CALLBACK'; 

    angular.forEach(streamers, function(stream) { 
     //json ajax request for channels online and offline status 
     $http.jsonp(streamUrl + stream + callback).then(function (data) { 
     //provides status of shows online and offline 

     // json ajax request for channels and channel's info 
     $http.jsonp(url + stream + callback).then(function (channelData) { 
      // pushing retrieve data from twitch.tv into array self.info 
      $scope.info.push(
      { 
       url: url + stream, 
       stream: stream, 
       status: !data.stream ? 'offline' : 'online', // ternary statement test channel status (online or offline) 
       logo: channelData.data.logo ? channelData.data.logo : 'placeholderlogo.jpg' // if channel does not have a logo image, this jpg will be the placeholder 
      } 
     ); 
     }); 
     }); 
    }); 
    }]);