I am struggling with keeping my message list in the inbox up to date, showing only the most recent 5 messages at all times. The issue arises when trying to refresh the page to display the latest messages.
Currently, the message page only calls the service once when it is initially opened. I have used $interval for other services like user to update the $scope.data. How can I recall the service every time the page is accessed?
Is there a way to trigger the service call each time the page is opened?
Template
<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>
Service
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
});
}
}
});
Controller
angular
.module('starter.controllers', [])
.controller('MessagesCtrl', function($scope, Messages, $http) {
Messages
.getData($http)
.then(function(data) {
$scope.messages = data;
});
});