6

I have this html (snippet to see ng-repeat):

  <ion-list show-delete="data.showDelete" id="deleteme">
  <div class="list list-inset searchlist"  >
  <label for="searchText" class="item item-input searchlabel" >
  <i class="icon ion-search placeholder-icon"></i>
    <input type='text'  ng-model='searchText' placeholder="Search"/>
  </label>
  </div>

<ion-item class="item-icon-left item-icon-right" ng-repeat="message in messageList | orderBy:'date':true | filter:searchText track by $id($index)" 
ng-click="openMessage(message.id)" >

<i class="icon ion-record" style="color:#8EBF3F;font-size:15px;height:70%" ng-show='message.mesgRead == false'></i>
<i class="" ng-show='message.mesgRead == true'></i>

     <h2 class="messagecontent"  >{{message.mesgContent}} </h2>

 <p class="messagedate">{{message.displayDate}} </p>
<i class="icon ion-chevron-right icon-accessory"></i>

 <ion-option-button class="button-assertive" style="line-height:73px;" ng-click="deleteMessage(message)">
      Delete
 </ion-option-button>

  </ion-item>
     </ion-list>

This is the controller (snippet of code):

  .controller('MessagesCtrl', function($scope, MessagesService, $timeout, ProfileService, $window, $filter, $sce, $ionicLoading, $ionicPopup) {

        $scope.messageList = "";

        console.log("check for messages...");

        MessagesService.loadFromMessageDB().then(function (dbMessages) {

            $scope.messageList = dbMessages;

        });

So that works well and my ng-repeat is populated.

I am using PushPlugin, so when I receive a Push Notification this callback that sits inside my MessagesService is triggered:

  onNotificationResponse: function(sender, message, msgId, msgType, msgUrl) {
        console.log("myApp.onNotificationResponse:" + message + " msgUrl:" + msgUrl);

        var nowDate = new Date().getTime();
        nowDate = moment(nowDate).format("ddd, Do MMM, H:mm");

        var jsDate = new Date();

        var tmpMessage = new myApp.Message(msgId, nowDate, msgType, sender, jsDate, message, msgUrl, false);

        messages.unshift(tmpMessage);
        messageDB.save(tmpMessage);
  },

My problem is I don't know how to refresh my ng-repeat list. I have tried adding $rootScope.$apply(); to the onNotificationResponse function but that did nothing.

So how do I add this new message to my ng-repeat list?

UPDATE:

By adding this to the onNotificationResponse function:

  $rootScope.$broadcast('newMessage', messages);

And then this to the controller:

  $scope.$on('newMessage', function(event, messages) {
   console.log("WOW, a new message!!! ");

   $scope.messageList = messages;
   $scope.$apply();

});

That works! However - this adds my new message to the bottom of the ng-repeat list. How can I add the message to the top?

scniro
  • 16,844
  • 8
  • 62
  • 106
lulu88
  • 1,694
  • 5
  • 27
  • 41
  • Are you sure you're updating $scope.messageList in onNotificationResponse? – kihu Jul 03 '14 at 08:40
  • Hi, you don't have access to the $scope variable inside a Service. – lulu88 Jul 03 '14 at 08:42
  • Perhaps this could help: http://stackoverflow.com/questions/19747830/how-do-i-pass-scope-from-controller-to-service-in-angularjs – kihu Jul 03 '14 at 08:48
  • onNotificationResponse is not called from the controller. Its called from my onNotificationGCM function - which has no idea of the $scope variable. – lulu88 Jul 03 '14 at 08:50
  • I found a 'hack' to access angular scopes from the outside: http://jsfiddle.net/austinnoronha/nukRe/light/ However, I think the proper way would be handling notifications entirely inside angular. – kihu Jul 03 '14 at 08:56
  • kihu see my update above? – lulu88 Jul 03 '14 at 09:16
  • nice! The ngRepeat list is ordered by date. Perhaps this is the reason the message appears at the bottom? – kihu Jul 03 '14 at 09:21
  • Yeah I want it to be ordered by date? Newest messages on top. – lulu88 Jul 03 '14 at 09:23
  • How to make the newest message go to the top of the ng-repeat list? – lulu88 Jul 04 '14 at 13:48
  • 1
    change the parameters of your `orderBy` statement https://docs.angularjs.org/api/ng/filter/orderBy – Aaron Saunders Jul 05 '14 at 15:34

1 Answers1

3

What I had to do in the end was change this part:

  var jsDate = new Date();

to this:

  var jsDate = new Date().getTime();

According to one of the angularJS guys, getTime() returns a number which works better when using orderBy/sorting.

Hope this helps someone else in future!

lulu88
  • 1,694
  • 5
  • 27
  • 41