お疲れ様です
現在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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/05/18 12:51
2017/05/18 12:54