2015-11-03 32 views
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)

我花了很多时间去寻找这个问题的解决方案。你能帮我吗? 可能你有另一个变种如何做到这一点?

回答