angularjs - 如何在 Ionic 应用程序中显示 Twitter 时间线？

Question

情况:

我需要在我的 Ionic 应用程序中显示 Twitter 时间轴。只是。无需进一步操作(登录、转发等)

尝试 1 - 简单嵌入(与普通网站一样)

在 View 中:

<a class="twitter-timeline" href="https://twitter.com/MY_TWITTER" data-widget-id="TWITTER_WIDGET_ID">Tweets by @MY_TWITTER</a>

index.html 中的脚本:

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> 

不工作。测试手机中的实际应用程序未显示。在浏览器中测试应用程序，它仅在刷新页面后出现。

但是，如果我将相同的代码行放入一个简单的 Angular 网络应用程序(而不是 Ionic 应用程序)中，它就可以正常工作。 为什么会有这种奇怪的行为？与 ionic 有关吗？

尝试 2 - NGTWITTER

这是本教程中解释的代码:http://devdactic.com/twitter-rest-api-angularjs/

Controller :

.controller('TwitterCtrl', function($scope, $ionicPlatform, $twitterApi, $cordovaOauth) {


  var twitterKey = 'STORAGE.TWITTER.KEY';
  var clientId = 'MY_CLIENT_ID';
  var clientSecret = 'MY_CLIENT_SECRET';
  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.getUserTimeline({screen_name: 'MY_TWITTER_FEED'}).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));
  };

});

View :

    <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>

通过这种方式，我可以正确地看到请求的 Twitter 提要以及编写推文的可能性。 不完全是我想要的，因为它要求用户登录 Twitter 并允许应用程序被授予访问他的 Twitter 帐户的权限，而我只想显示 Twitter 提要，仅此而已。

此外，一旦打开应用程序的推特部分，应用程序将不再正常工作，菜单中的一些链接将停止工作。

问题:

如何在 Ionic 应用程序中简单地显示 Twitter 时间轴？

谢谢!

Answer 1

我在 git hub 中为 Twitter Login 上传了一个示例项目在 Ionic 框架中，如果您有任何疑问，请告诉我
在克隆项目之前，请执行以下步骤:
1)在Twitter Developer console中创建一个开发者项目
2) 用你在 Twitter 开发者控制台中创建的值替换项目中的 APPID 和 APPSECRET
3)请在twitter 开发者应用中将回调url 写为http://tinyurl.com/krmpchb
4)查看github中的README.md文件