【问题标题】:Reload ionic ng-repeat list when a new item received in angularJS service在 angularJS 服务中收到新项目时重新加载 ionic ng-repeat 列表
【发布时间】:2014-08-24 06:51:39
【问题描述】:

我有这个 html(sn-p 看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>

这是控制器(代码的sn-p):

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

        });

这样效果很好,我的ng-repeat 被填充了。

我正在使用 PushPlugin,所以当我收到推送通知时,会触发位于我的 MessagesService 中的回调:

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

我的问题是我不知道如何刷新我的ng-repeat 列表。我尝试将$rootScope.$apply(); 添加到onNotificationResponse 函数中,但没有任何效果。

那么如何将这条新消息添加到我的ng-repeat 列表中?

更新:

通过将其添加到 onNotificationResponse 函数中:

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

然后这个给控制器:

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

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

});

这行得通!但是 - 这会将我的新消息添加到 ng-repeat 列表的底部。如何将消息添加到顶部?

【问题讨论】:

  • 您确定要更新 onNotificationResponse 中的 $scope.messageList 吗?
  • 您好,您无权访问服务中的 $scope 变量。
  • 也许这会有所帮助:stackoverflow.com/questions/19747830/…
  • onNotificationResponse 不是从控制器调用的。它是从我的 onNotificationGCM 函数调用的——它不知道 $scope 变量。
  • 更改orderBy语句docs.angularjs.org/api/ng/filter/orderBy的参数

标签: angularjs angularjs-ng-repeat ionic-framework


【解决方案1】:

最后我要做的是改变这部分:

  var jsDate = new Date();

到这里:

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

根据其中一位 angularJS 人员的说法,getTime() 返回一个在使用 orderBy/sorting 时效果更好的数字。

希望这对将来的其他人有所帮助!

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2018-06-03
    • 1970-01-01
    • 2014-01-16
    • 2014-11-27
    • 1970-01-01
    • 2017-07-13
    • 1970-01-01
    相关资源
    最近更新 更多