AngularJS每次打开页面时加载服务

AngularJS load service everytime the page is opened

本文关键字：加载 服务 AngularJS      更新时间：2023-09-26

我正在收件箱中加载邮件列表，列表中最近的 5 封邮件。我在刷新页面时遇到问题，以便页面始终显示列表中最新的 5 条消息。

消息页面只是在第一次打开服务时调用该服务。如何召回服务？对于用户等其他服务，我一直在使用$interval来更新$scope.data

是否可以每次打开服务时都召回服务？

模板

<div class="list">
  <ul ng-controller="MessagesCtrl">
    <li ng-repeat="message in messages.data" id="message{{message.id}}"  class="item">
        <a href="#" class="messageIcon">{{message.user}}</a>  
  <p>{{message.title}}</p><a ng-click="deleteItem($index)">x</a>
    </li>
</ul>

服务 

angular
    .module('starter.controllers', [])
    .factory("Messages", function() {
        var Messages = {};
        return {
            getData: function($http) {
                return $http.get("http://website.com/index.php/id/user/get_message/i").
                success(function(response) {
                    /// console.log(JSON.stringify(response));
                    Messages.data = response.data;
                    return Messages;
                }).error(function(data, status, headers, config) {
                    // log error
                });
            }
        }
    });

控制器

angular
    .module('starter.controllers', [])
    .controller('MessagesCtrl', function($scope, Messages, $http) {
    Messages
        .getData($http)
        .then(function(data) {
            $scope.messages = data;
        });
});

您可以执行以下操作之一：

1） 定期使用服务中的$interval轮询 getdata 函数。然后在控制器中的 $scope.messages 上编写监视，每次值更改时 UI 都会更新。

2） 使用 websocket 始终保持数据实时。我不确定这将是最简单的选择。甚至可能无法根据您预期的流量进行扩展。

如果您不精通 websockets，我个人会选择第一个选项。

相关文章：