AngularJSの$intervalの中で繰り返されない部分がある

先に質問した、
AngularJSでのPromiseの返し方について（変数に繰り返し値を設定したい）
の続きです。

TypeError: Icecast.then is not a function

のエラーは出なくなったのですが、今度は別のところで問題が出ています。
実現したいことは上記の質問とほぼ同じで、AngularJS 1.6.4を使って、あるURLから返ってくるJSONの状態に応じた内容を随時ページに反映させたいと考えています。
MainControllerの中の$intervalで繰り返しをさせたいのですが、コンソールには最初にIcecast was called.と$http successful.がそれぞれ1回だけしか表示されず、その後loopの表示が繰り返されます。
Icecastfactoryの中身を繰り返し実行させて、ほぼ1秒ごとにURLにアクセスさせたいのですが、それが繰り返されていないようです。
どのようにしたらよいでしょうか。
よろしくお願いします。
コードは少し変えたので、改めて書きます。
index.html

lang
1<!doctype html>
2<html ng-app="app">
3  <head>
4    <script src="bower_components/angular/angular.min.js"></script>
5    <script src="getmetadata.js"></script>
6  </head>
7  <body>
8    <section id="main" ng-controller="MainController">
9        <div ng-bind="state"></div>
10    </section>
11  </body>
12</html>

getmetadata.js

lang
1angular
2  .module('app', [])
3  .controller('MainController', ['$scope', '$interval', 'Icecast', MainController])
4  .factory('Icecast', ['$http', '$q', Icecast]);
5
6function MainController($scope, $interval, Icecast) {
7  $scope.state = 'offline';
8  var t = $interval(function() {
9    Icecast.then(function(data) {
10      console.log('loop');
11      if (data.icestats !== undefined && data.icestats.source !== undefined) {
12        if ($scope.state === 'offline') {
13          $scope.state = 'now live!';
14        } 
15      } else {
16        if ($scope.state === 'now live!') {
17          $scope.state = 'offline';
18        }
19      }
20    });
21  }, 1000);
22}
23
24function Icecast($http, $q) {
25  console.log('Icecast was called.');
26  var d = $q.defer();
27
28  return $http({
29      method: 'GET',
30      url: 'http://live.oguradio.com:8000/status-json.xsl',
31      headers: {
32        'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8',
33        'Origin': undefined
34      }
35    })
36    .then(success, fail);
37
38  function success(response) {
39    console.log('$http successful.');
40    d.resolve(response.data);
41    return d.promise;
42  }
43
44  function fail(response) {
45    console.log('$http failed.');
46    d.resolve(response);
47    return d.promise;
48  }
49}

行動規範の内容に同意します

回答1件

ベストアンサー

function Icecast($http, $q) {}が$http()をreturnしているので１度のみ実行され、結果のみ返しています。

毎回$http()を呼びたいのであればreturnにしてはダメです。

以下のサンプルを参考にしてみて下さい。

サンプル

投稿2017/04/20 12:45

pinpikokun

総合スコア376

ogra

2017/04/20 13:07

ご回答ありがとうございます。サンプルのページを見ながら、実際に配信を開始したり終了したりを切り替えてみましたが、残念ながら、数字が増加するだけで、offlineがnow live!になったり、dataの表示内容が変化することはありませんでした。

pinpikokun

2017/04/20 13:11

コンソールに「$http successful」が繰り返し出ていると思います。 $http()の結果をどう返しているのかわからないですが出力結果を見る感じ「data.icestats.source」が帰ってきていないのでは？

ogra

2017/04/20 13:32

サンプルのコードにconsole.log(data);を入れて確認したところ、おっしゃる通り、data.icestats.sourceが返ってきていないことが分かりました。しかし分からないことがあります。配信停止状態でサンプルページを開いてから、配信を開始すると、data.icestats.sourceが返ってきません。（本来は返ってきてほしい）反対に、配信している状態でサンプルページを開き、それから配信を停止すると、今度はdata.icestats.sourceがなくなりません。（返ってこなくなってほしいのですが。） $httpでなく、ページのリロードをかければ、配信中はdata.icestats.sourceが返ってきて、配信停止状態ではdata.icestats.sourceが返ってこない状態になる（正しい挙動）のですが、$httpではそうならないようです。 $httpとページのリロードではhttp GETの挙動が異なったりするのでしょうか。

pinpikokun

2017/04/20 13:44 編集

元のソースから質問に対する解答しかしていないので（今回で言う$http successfulが１回しか返らない）あまりロジックは見ていませんが、「var d = $q.defer();」が外に出ているのが悪いかもしれません。こちらに確認できる環境がないのでわかりませんがとりあえずサンプルだけ修正しておきました。

ogra

2017/04/20 13:49

今度はうまくいきました！ページを表示中に配信の開始と停止を切り替えたところ、offlineとnow live!がほぼリアルタイムで切り替わるようになりました。ありがとうございます！

行動規範の内容に同意します