我应该创建一个 .factory 以便将变量的值共享给两个 ajax 请求吗？

Question

使用 angularjs 我发出了两个 ajax json 请求，第一个请求是检索频道的在线/离线状态，第二个 ajax json 请求是关于频道的信息（标志、名称、状态等）。

我将变量 signal 分配给 'data.stream'，这是通道的在线/离线状态，以在 json 请求之间共享信号。在 Google 开发人员控制台中，我收到一个空值。我在这里 http://www.ng-newsletter.com/posts/beginner2expert-services.html 做了一些研究，发现使用服务可能是一种解决方案。我按照说明进行操作，但仍然无法获得 json 请求之间的范围以识别信号。

我读到可以使用 rootscope，但不推荐，不确定这有多真实，因为使用 angular 的新手，但我想通过应用最佳实践开始我的 angular 旅程。

回顾：使用 Angular Ajax 向 twitch api 发出 jsonp 请求，我发出两个请求，一个是检索在线/离线状态我的流媒体数组中的频道，另一个 ajax json 请求是检索频道的信息，我需要已分配值 data.stream 的变量信号的范围可以看到在 ajax jsonp 个请求之间。请让我知道这是否合乎逻辑，或者我是否 "going around the world again".

这是一个 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 并链接承诺。这个实例不需要工厂，但最好的做法是拥有一个仅 returns 您的信息对象的工厂。我不确切知道你想要的格式，所以我创建了一个。这是 plunker：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
            }
          );
        });
      });
    });
  }]);

我应该创建一个 .factory 以便将变量的值共享给两个 ajax 请求吗？

Should I create a .factory in order to share a variable's value to two ajax requests?

ajax

service

jsonp

angularjs