离子-离子列表中的交换元素

Question

我有一个离子列表显示使用ng-repeat的用户列表。 我想做的是，每当收到通知时，将其中一位用户从他的位置移到顶部，就像在whatsapp聊天中收到消息时一样。 传递到列表的数组是在控制器中定义的，如下面的代码所示。

listUsers.html：

<ion-view title="listaUsers" can-swipe-back="true">
    <ion-content overflow-scroll="true" padding="false" scroll="true" class="has-header">
        <ion-list ng-repeat="session in listUsers">
            <a class="item item-avatar" href="#/app/profile/listUsers/chat/{{session.id}}">

                <img ng-src="http://sviluppo.asuscomm.com:43280/mob/ionic/immagini_{{session.social}}/{{session.id}}.jpg" err-SRC="img/default-user.png" />

                <h2>{{session.nome}} - {{session.cognome}}</h2>
                <p>{{session.messaggio}}</p>


                <div ng-if="session.in_out_struttura == 1">
                    <span class="badge badge-balanced">SI</span>

                </div>
                <div ng-if="session.in_out_struttura == 0">
                    <span class="badge badge-assertive">NO</span>
                </div>

            </a>
        </ion-list>
    </ion-content>
</ion-view>

listUsers.js：

angular.module('app.controllers')

.controller('listUsersCtrl', function ($scope, $http, $rootScope, $ionicLoading) {

    $scope.listUsers = []; 
    /*Some function will put the data into $scope.listUsers, 
      every element will be a JSON object like this:
        {
            id: 1,
            nome: "John",
            cognome: "Doe",
            social: "F",
            messaggio: "Some Message"
        }
    */

    //This function removes the record to move from the array and puts it back into it in first position
    $scope.putOnTop = function (id_usr, message) {
        for (var x = 0; x < $scope.listUsers.length; x++) {
            if ($scope.listUsers[x].id == id_usr) {
                var record = $scope.listUsers.splice(x, 1)[0];
                record.messaggio = message;
                $scope.listUsers.unshift(record); 
                break;
            }
        }
    }

    //This listens to a custom event emitted from app.js
    $rootScope.$on("putUserOnTop", function (event, id_usr, message) {
        $scope.putOnTop(id_usr, message);
    });


})

app.js：

//This is just a part of the original app.js
angular.module('app', ['ionic', 'app.controllers', 'app.routes', 'app.services', 'app.directives', 'pascalprecht.translate', 'ngCordova', 'ngCordovaOauth', 'ionic-datepicker'])

.run(function ($ionicPlatform, $translate, $http, $state, $ionicHistory, $rootScope, $cordovaNetwork) {

    //...

    $ionicPlatform.ready(function () {

        //...

        try {
            var push = PushNotification.init({
                android: {
                    senderID: "XXXXXXXXXX"
                },
                ios: {
                    alert: "true",
                    badge: "true",
                    sound: "true"
                },
                windows: {}
            });
        } catch (e) {
            console.log("ERROR PUSH NOTIFICATION : " + e);
        }

        try {
            push.on('registration', function (data) {
                localStorage.setItem("registrationId", data.registrationId);
            });


            push.on('notification', function (data) {

                var senderId = data.additionalData.senderId;
                var destId = data.additionalData.destId;
                var message = data.additionalData.messaggio;

                //Checking if the app was in foreground, background or not running
                if (data.additionalData.coldstart !== undefined) {
                //THE WAS NOT IN FOREGROUND
                    if ($ionicHistory.currentView().url == "/app/profile/listUsers") {
                        $rootScope.$emit("putUserOnTop", senderId, message);
                    } else if ($ionicHistory.currentView().url == "/app/profile/listUsers/chat/" + senderId) {
                        //...
                    } else {
                        //...
                    }
                } else {
                    //THE APP WAS IN FOREGROUND
                    $rootScope.$emit("putUserOnTop", senderId, message);
                    //...
                }

            });

            push.on('error', function (e) {
                //...
            });
        } catch (e) {
            console.log("ERROR : " + e);
        }

        //...

})

.config(...);

问题是，如果我运行此代码，记录将不会在列表中移动，并且控制台中不会显示任何错误。 如果我putOnTop使用按钮运行putOnTop函数，它实际上可以正常工作。 我想念什么？

谢谢。

编辑：

我还尝试使用$cordovaPushV5代替PushNotification ，相应地修改了代码，但是没有任何变化，相同的行为。 以下是更新的app.js ：

//This is just a part of the original app.js
angular.module('app', ['ionic', 'app.controllers', 'app.routes', 'app.services', 'app.directives', 'pascalprecht.translate', 'ngCordova', 'ngCordovaOauth', 'ionic-datepicker'])

.run(function ($ionicPlatform, $translate, $http, $state, $ionicHistory, $rootScope, $cordovaNetwork, $cordovaPushV5) {

    //...

    $ionicPlatform.ready(function () {

        //...

        $cordovaPushV5.initialize({
            android: {
                senderID: "XXXXXXXXXX"
            },
            ios: {
                alert: "true",
                badge: "true",
                sound: "true"
            },
            windows: {}
    }).then(function() {
        // start listening for new notifications
        $cordovaPushV5.onNotification();
        // start listening for errors
        $cordovaPushV5.onError();

        // register to get registrationId
        $cordovaPushV5.register().then(function(registrationId) {
            localStorage.setItem("registrationId", registrationId);
        });
    });

    $rootScope.$on('$cordovaPushV5:notificationReceived', function(event, data){
        var senderId = data.additionalData.senderId;
        var destId = data.additionalData.destId;
        var message = data.message;
        var timestamp = data.additionalData.timestamp;

        if (data.additionalData.coldstart !== undefined) {
            if ($ionicHistory.currentView().url == "/app/profile/listUsers") {
                $rootScope.$emit("putUserOnTop", [senderId, message, timestamp]);
            } else if ($ionicHistory.currentView().url == "/app/profile/listUsers/chat/" + senderId) {
                $rootScope.$emit("getMessages", {
                    senderId: senderId,
                    destId: destId
                });
            } else {
                $state.go("app.chat", {
                    userId: senderId
                });
            }
        } else {
            if ($ionicHistory.currentView().url == "/app/profile/listUsers") {
                $rootScope.$emit("putUserOnTop", [senderId, message, timestamp]);
            } else if ($ionicHistory.currentView().url == "/app/profile/listUsers/chat/" + senderId) {
                $rootScope.$emit("getMessages", {
                    senderId: senderId,
                    destId: destId
                });
            }

        }
    });

    // triggered every time error occurs
    $rootScope.$on('$cordovaPushV5:errorOcurred', function(event, e){
        //...
    });

    //...

})

.config(...);

Answer 1

问题在于您从$rootScope.$on获取参数的方式。 参数将在第二个参数中，如下所示：

$rootScope.$on("putUserOnTop", function (event, args) {
    var id_usr = args.id_usr;
    var message = args.message;
    $scope.putOnTop(id_usr, message);
});

Answer 2

一个简单的方法是使用角度过滤器： orderBy 。 特别是，您可以在项目上设置一个更新的date属性，然后在desc模式下按它进行过滤。 例如：

设置过滤器

<ion-list ng-repeat="session in listUsers | orderBy: '-updated_at'">

设置updated_at

$rootScope.$on("putUserOnTop", function (event, id_usr, message) {
    var user = $scope.listUsers.find(function() {
        return user.id == id_usr;
    });

    user.updated_at = new Date();
});

orderBy过滤器本质上将使用updated_at属性对商品进行重新排序，因此，每次收到消息时，您都可以设置此时间戳来更新您的收藏顺序。

Answer 3

好的，只是报告说，我需要做的就是放$scope.$apply(); 在putOnTop函数中，如下所示：

$scope.putOnTop = function (id_usr, message) {
    for (var x = 0; x < $scope.listUsers.length; x++) {
        if ($scope.listUsers[x].id == id_usr) {
            var record = $scope.listUsers.splice(x, 1)[0];
            record.messaggio = message;
            $scope.listUsers.unshift(record); 
            $scope.$apply() //<============================
            break;
        }
    }
}

谢谢大家的帮助！