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

Question

情况：

我需要在我的Ionic应用程序中显示推特时间线。仅此而已。无需进一步操作(登录、转发等(

尝试1-简单嵌入(与正常网站一样(

视图中：

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

不工作。测试手机中的实际应用程序时，没有显示。在浏览器中测试应用程序时，它只有在刷新页面后才会出现。

但是，如果我把同样的代码行放进一个简单的有角度的网络应用程序(而不是Ionic应用程序(中，它就会正常工作。为什么会有这种奇怪的行为？与离子有关吗？

尝试2-NGTWITTER

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

控制器：

.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));
  };
});

视图：

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

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

此外，一旦打开应用程序的推特部分，该应用程序就无法正常工作，菜单中的一些链接就会停止工作。

问题：

如何在Ionic应用程序中简单地显示推特时间线？

谢谢！

Answer 1

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