angularjsのng-repeatが動作しない

お疲れ様です

現在monaca+angularjsを利用してTwitterのuserTimelineを取得・表示したいと考えております

REST Apiを利用してTweetを取得することは出来ましたが、取得したデータをng-repeatを利用して動的にリスト表示することが出来ず困っております。

ソースは以下の通りとなります

html
1<!DOCTYPE HTML>
2<html ng-app="myApp" lang = "ja">
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6  <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7  <script src="components/loader.js"></script>
8  <script src="lib/angular/angular.min.js"></script>
9  <script src="lib/onsenui/js/onsenui.min.js"></script>
10  <script src="lib/onsenui/js/angular-onsenui.min.js"></script>
11  
12  <script src="js/jsoauth.js"></script>
13  <script src="js/underscore.js"></script>
14
15  <link rel="stylesheet" href="components/loader.css">
16  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
17  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
18  <link rel="stylesheet" href="css/style.css">
19
20  <script>
21    var app = angular.module("myApp", ['onsen']);
22    
23    app.controller("TwitterTL",function($scope){
24      var callbackUrl = "http://example.com";
25    
26      //jsOath object
27      var oauth = OAuth({
28        consumerKey : "hogehoge",
29        consumerSecret : "fugafuga",
30        callbackUrl : callbackUrl,
31        requestTokenUrl : "https://api.twitter.com/oauth/request_token",
32        authorizationUrl : "https://api.twitter.com/oauth/authorize",
33        accessTokenUrl : "https://api.twitter.com/oauth/access_token"
34      });
35    
36      $scope.connect = function(){
37        console.log("start to connect");
38        oauth.fetchRequestToken(function(url){
39          console.log("Opening Request Token URL : " + url);
40          showAuthWindow(url);
41        }, function(data) {
42          console.log(JSON.stringify(data));
43        });
44      }
45      
46      function showAuthWindow(url){
47        var browser = window.open(url, "_blank", "location=yes");
48        browser.addEventListener("loadstart", function(event){
49          
50          if(event.url.indexOf(callbackUrl) >= 0){
51            event.url.match(/oauth_verifier=([a-zA-Z0-9]+)/);
52            oauth.setVerifier(RegExp.$1);
53            oauth.fetchAccessToken(function(data){
54              getTwits();
55              browser.close();
56            }, function(data){
57              console.log(JSON.stringify(data));
58            });
59          }
60        });
61      }
62      
63      function getTwits(){
64        $("#btnLogin").hide();
65        oauth.getJSON('https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=monaca_io&count=20',
66          function(data){
67            $scope.tweets = data;
68            console.log("set data to tweets");
69          }, function(data){
70            console.log(JSON.stringify(data));
71          });
72      }
73    });
74  </script>
75</head>
76<body>
77  <ons-page ng-controller="TwitterTL">
78    <ons-toolbar>
79      <div class="left">
80        <ons-icon icon="ion-social-twitter" size="40px" fixed-width="true"></ons-icon>
81      </div>
82      
83      <div class="center">
84        Twitter Timeline
85      </div>
86      
87      <div class="right">
88        <ons-icon icon="ion-search" size="40px" fixed-width="true"></ons-icon>
89      </div>
90    </ons-toolbar>
91    
92    <div class="list scroll-area">
93      <div id="btnLogin">
94        <ons-button modifier="large" ng-click="connect()">Connect To Twitter</ons-button>
95      </div>
96      
97      <!-- TL scrolle-->
98      <ons-list>
99        <ons-list-item modifier="chevron" ng-repeat="tweet in tweets">
100          {{tweet.text}}
101        </ons-list-item>
102      </ons-list>
103    </div>
104
105  </ons-page>
106</body>
107</html>
108

Monacaのサンプルソースを見ながらAngularjsへ書き換えております。
移植途中のためtextのみ並べておりますが{{tweet.text}}が表示されない状況です。

どうかご教授願います

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

回答2件

ベストアンサー

$scope.tweets = data;を行う箇所でデータバインディングは動いてますかね？

oauth.getJSONのコールバック内では対象にならなかったような記憶もあり...。

$scope.tweets = data;

の部分を

$timeout(function(){
  $scope.tweets = data;
})

や

$scope.$apply(function(){
  $scope.tweets = data;
})

にしてワークしたらあたりだと思います。

投稿2017/05/18 12:43

h_daido

総合スコア824

Nect

2017/05/18 12:51

あたりでした！ $timeout で動作を確認しました。ありがとうございます

h_daido

2017/05/18 12:54

angularのここの仕様はしっかりと原理を理解されたほうがいいと思いますよ。今後もつまづくかもしれません。こちらのリンクは一読する価値ありです。 http://yutawatanabe.hatenablog.com/entry/angularjs-scope-apply なお、$scope.$applyでもワークするほうがそのほうがベターかなと思います。$timeoutだと"0秒まってから実行する"という意味での非同期になるので。

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

{{tweet.text}}が表示されない、ということはons-list-itemはtweets分表示されるものの、tweet.textがons-list-itemに表示されて欲しいのに表示されないという認識でよいですか？
（質問タイトルからは、ons-list-itemが表示されないのかと予想しましたが・・）

もし上記認識どおりだとしたら、tweet.textというプロパティが存在していないのではないでしょうか。
原因が上記だとしたら、twitter REST Apiの仕様を再確認する必要があると思います。

投稿2017/05/18 12:02