2
我想製作twitter feed離子應用程序。但有一個問題。啓動應用程序後,它會顯示出$ cordovaOauth授權窗口,這樣的事情: what shood i see
但我有: what i have
我試過很多wariants做到這一點。 E.g:
ionic start devdactic-twitter blank
cd devdactic-twitter
bower install ng-twitter-api --save
bower install ngCordova#c3634c64090fa11c3e6bab3fcdc29712d3ecb965 --save
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git
cordova plugin add cordova-plugin-whitelist
加載庫:
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="lib/ng-twitter-api/dist/ng-twitter-api.min.js"></script>
<script src="lib/sha1.js"></script>
angular.module('starter', ['ionic', 'ngCordova', 'ngTwitter'])
查看:
<body ng-app="starter" ng-controller='AppCtrl'>
<ion-pane>
<ion-header-bar class="bar-positive">
<h1 class="title">My Twitter Feed</h1>
</ion-header-bar>
<ion-content class="has-header padding">
<div class="list">
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text" placeholder="My tweet..." ng-model="tweet.message" ng-maxlength="140">
</label>
<button class="button button-small" ng-click="submitTweet()">
Tweet
</button>
</div>
</div>
<ion-refresher on-refresh="doRefresh()"></ion-refresher>
<div ng-show="home_timeline.length == 0">Loading tweets...</div>
<div ng-repeat="entry in home_timeline" class="list card">
<div class="item item-avatar">
<img ng-src="{{entry.user.profile_image_url}}"/>
<h2>{{entry.user.name}}</h2>
<p>{{correctTimestring(entry.created_at) | date:'medium'}}</p>
</div>
<div class="item item-body">
<p ng-bind-html="entry.text"></p>
<img ng-if="entry.extended_entities" ng-src="{{ entry.extended_entities.media[0].media_url }}" style="width: 100%;"/>
</div>
</div>
</ion-content>
</ion-pane>
</body>
AppCtrl:
.controller('AppCtrl', function($scope, $ionicPlatform, $twitterApi, $cordovaOauth) {});
然後(我在這裏輸入我的鑰匙和密碼):
var twitterKey = 'STORAGE.TWITTER.KEY';
var clientId = 'yourConsumerKey';
var clientSecret = 'yourConsumerSecretKey';
var myToken = '';
$scope.tweet = {};
$ionicPlatform.ready(function() {
myToken = JSON.parse(window.localStorage.getItem(twitterKey));
if (myToken === '' || myToken === null) {
$cordovaOauth.twitter(clientId, clientSecret).then(function (succ) {
myToken = succ;
window.localStorage.setItem(twitterKey, JSON.stringify(succ));
$twitterApi.configure(clientId, clientSecret, succ);
$scope.showHomeTimeline();
}, function(error) {
console.log(error);
});
} else {
$twitterApi.configure(clientId, clientSecret, myToken);
$scope.showHomeTimeline();
}
});
功能控制器:
$scope.showHomeTimeline = function() {
$twitterApi.getHomeTimeline().then(function(data) {
$scope.home_timeline = data;
});
};
$scope.submitTweet = function() {
$twitterApi.postStatusUpdate($scope.tweet.message).then(function(result) {
$scope.showHomeTimeline();
});
}
$scope.doRefresh = function() {
$scope.showHomeTimeline();
$scope.$broadcast('scroll.refreshComplete');
};
$scope.correctTimestring = function(string) {
return new Date(Date.parse(string));
};
我得到devdactic這段代碼(你可以找到ngTwitter)
我花了很多時間去尋找這個問題的解決方案。你能幫我嗎? 可能你有另一個變種如何做到這一點?