Ionic / Angular -刷新应用简历上的文章

Ionic / Angular - Refresh articles on app resume

本文关键字：文章 应用 Angular 刷新 Ionic      更新时间：2023-09-26

我使用Ionic/Angular开发了一个新闻应用程序。下面是News选项卡的代码:

<ion-view view-title="News">
  <ion-content class="padding">
    <ion-refresher pulling-text="Actualizează articolele" on-refresh="doRefresh()">
    </ion-refresher>
      <a class="article" ng-repeat="article in articles" href="#/tab/news/{{article.id}}">
        <img ng-src="{{article.image}}" class="article-image">
        <h2 class="article-title">{{article.title}}</h2>
        <p class="article-published">{{article.published}}</p>
        <p class="article-intro">{{article.intro}}...</p>
      </a>
  </ion-content>
</ion-view>

这里是控制器:

.controller('NewsCtrl', function($scope, Articles) {
  Articles.all().then(function(articles) {
    $scope.articles = articles
  });
  $scope.doRefresh = function() {
    Articles.all().then(function(articles) {
      $scope.articles = articles
    });
    $scope.$broadcast('scroll.refreshComplete');
  };
})

$scope.articles = articles从外部JSON文件中读取文章。

所以我有拉刷新选项工作，但有一个问题。如果用户在后台保持应用程序打开，我希望文章在用户再次打开应用程序时刷新。有人能帮我实现这个吗?

一个好的解决方案是使用cordova resume事件并在触发刷新回调时触发它。您可以使用以下代码来定义它:

document.addEventListener("resume", yourCallbackFunction, false);

但是，更好的方法是使用$ionicPlatform服务。

.controller('NewsCtrl', function($scope, Articles, $ionicPlatform) {
  $ionicPlatform.on('resume', $scope.doRefresh);
  Articles.all().then(function(articles) {
    $scope.articles = articles
  });
  $scope.doRefresh = function() {
    Articles.all().then(function(articles) {
      $scope.articles = articles
    });
    $scope.$broadcast('scroll.refreshComplete');
  };
})

另外，另一种方法是在根作用域上广播，以避免破坏控制器内部的角方式。

app.module('myApp',[])
    .run(function ($rootScope) {
        document.addEventListener("resume", function () {        
            $rootScope.$broadcast('onAppResume');        
        }, false);        
    });

然后你可以从你的控制器中监听这个事件:

.controller('NewsCtrl', function($scope, Articles) {
  $scope.$on('onAppResume', $scope.doRefresh);
  Articles.all().then(function(articles) {
    $scope.articles = articles
  });
  $scope.doRefresh = function() {
    Articles.all().then(function(articles) {
      $scope.articles = articles
    });
    $scope.$broadcast('scroll.refreshComplete');
  };
})
相关文章：