我正在使用angular 1和ionic 1
为浏览器创建聊天应用程序这是我的控制器和视图 问题是当新消息进入所选房间时,这是当前房间监视变量,并且在控制台下面给我正确的输出,但同样的方法被调用两次,在第一次调用时给我正确的输出,但之后他给我主节点输出。 / p>
$scope.firstLoad='';
$scope.directLoad='';
$scope.text = "Tap on name to open chat !";
$scope.myUid = localStorage.uid;
$scope.rooms = [];
$scope.roomsfound = 0;
$scope.roomswait = 1;
$scope.name = "";
$scope.number = "";
$scope.currentRoomId="";
$scope.is_select_user = 0;
$scope.loadDetails = function (roomId, contactName, phone, name) {
$timeout(function () {
$scope.firstLoad=false;
},2000);
$rootScope.showLoading("loadchat");
$scope.currentRoomId="";
$scope.name = "";
$scope.number = "";
$scope.name = name;
$scope.number = phone[0] == '1' ? phone.slice(1) : phone;/*to stipe out 1 from the phone number in view*/
$scope.is_select_user = 1;
$scope.roomName = "Chat";
$scope.chats = [];
$scope.chats.length = 0;
$scope.roomId = '';
$scope.roomId = roomId;
$scope.roomName = contactName;
firebase.database().ref('messages/' + $scope.roomId).once('value', function (data) {
$timeout(function () {
var tempArr = [];
data.forEach(function (data) {
tempArr.push({
key: data.key,
content: data.val().message,
createdAt: data.val().timestamp,
from: data.val().sendBy,
to: data.val().sentTo,
direction: data.val().direction,
status: data.val().status,
type: data.val().type
})
});
$scope.chats = tempArr;
});
});
$scope.currentRoomId= $scope.roomId;
console.log("In Load Details "+$scope.currentRoomId);
if($scope.firstLoad == false){
firebase.database().ref('rooms/' + $scope.myUid +'/'+$scope.roomId ).update({
isRead:'true'
})
}
$scope.Scroll_top();
$rootScope.hideLoading("loadchat");
}
/*Live Chat Listner for Current Room*/
$scope.$watch(
"currentRoomId",
function handleMessageChange( newValue, oldValue ) {
$timeout(function () {
firebase.database().ref('messages/'+$scope.currentRoomId+'/').on('value', function (data) {
console.log('messages/'+$scope.currentRoomId);
if($scope.currentRoomId != ""){
var liveChatArr = [];
$scope.chats = [];
data.forEach(function (data) {
liveChatArr.push({
key: data.key,
content: data.val().message,
createdAt: data.val().timestamp,
from: data.val().sendBy,
to: data.val().sentTo,
direction: data.val().direction,
status: data.val().status,
type: data.val().type
})
});
$scope.chats = [];
$scope.chats.length=0;
if( $scope.chats.length == 0)
$scope.chats=liveChatArr ;
else{
$scope.chats = [];
$scope.chats.length=0;
$scope.chats=liveChatArr ;
}
$scope.Scroll_top();
}
});
},3000);
});
/*End Live Chat Listener*/
/*Send New Message*/
$scope.data = {};
$scope.sendMessage = function (roomId, message, name, phone, contactName) {
Chats.send(roomId, $scope.myUid, message);
document.getElementById("mymsg").value = "";
$scope.data.message='';
};
/* End Send New Message*/
/* Live Room Listner*/
firebase.database().ref('rooms/' + $scope.myUid).orderByChild('lastMessageAt').on('value', function (data) {
$scope.liverooms = [];
$scope.liverooms.length = 0;
$scope.rooms = [];
$scope.rooms.length=0;
$timeout(function () {
var unique = function(origArr) {
//console.log(origArr);
var newArr = [];
var origLen = origArr.length;
var found, x, y;
for (x = 0; x < origLen; x++) {
//console.log(x);
found = undefined;
for (y = 0; y < newArr.length; y++) {
if (origArr[x] === newArr[y]) {
found = true;
break;
}
}
if (!found) {
newArr.push(origArr[x]);
}
}
return newArr;
}
data.forEach(function (data) {
var ref=firebase.database().ref('rooms/' + $scope.myUid);
var key = data.ref.key;
var fields = key.split('_');
var len = fields.length;
var mobile = fields[len - 1];
$scope.liverooms.push({
roomId: key,
contactName: data.val().contactName,
contactfName: (data.val().contactName.split(' '))[0],
lastMessage: data.val().lastMessage,
lastMessageAt: data.val().lastMessageAt,
lastMessageDirection: data.val().lastMessageDirection,
phone: mobile[0] == '1' ? mobile.slice(1) : mobile,
isRead:data.val().isRead
});
});
$scope.rooms = [];
$scope.rooms.length=0;
if( $scope.rooms.length == 0 ){
$scope.rooms=unique($scope.liverooms).reverse();
}else{
$scope.rooms = [];
$scope.rooms.length=0;
$scope.rooms=unique($scope.liverooms).reverse();
}
//console.log($scope.rooms);
});
$scope.roomswait = 0;
if ($scope.rooms.length > 0) {
$scope.roomsfound = 1;
}
});
/* End Live Room Listner*/
查看
<div class="content-wrapper">
<div class="container-fluid">
<div class="col-lg-3 searchmain-box">
<br>
<div class="input-group col-sm-6 col-xs-3 col-md-12 mb-2 mr-sm-2 mb-sm-0">
<div class="input-group-addon radius-left search-box"><i class="fa fa-search"></i></div>
<input type="text" class="form-control radius-right search-box" ng-model="search" id="inlineFormInputGroup" placeholder="Search">
</div>
<br>
<div class="col-md-12 text-center" ng-show="roomswait == 1">
<img src="img/loading.gif" width="30">
<br>
<h5 class="text-white">Please Wait.. Loading Chats</h5>
</div>
<ul class="list-group user-list" ng-show="roomsfound == 0">
<li class="list-group-item user-list" style="cursor:pointer;outline:none" ng-if="room" ng-repeat="room in rooms| filter:search " ng-init="($first && firstLoad) ? loadDetails(room.roomId, room.contactName + ' (' + room.phone + ')', room.phone, room.contactName) : ''" type="item-text-wrap" ng-click="loadDetails(room.roomId, room.contactName + ' (' + room.phone + ')', room.phone, room.contactName)">
<!--<li class="list-group-item user-list" ng-repeat="room in rooms| orderBy:'lastMessageAt':true | filter:search" type="item-text-wrap" ng-click="loadDetails(room.roomId, room.contactName + ' (' + room.phone + ')', room.phone, room.contactName)">-->
<div class="user-profile" ng-if="room.contactName == name && room.phone == number">
<span><img src="img/liveicon.png"></span>
</div>
<div class="user-name" >
<h4 class="ma-0" ng-class="{'user-live':room.contactName == name && room.phone == number , 'dark-text':(room.contactName != name || room.phone != number) && room.isRead != 'false' , 'not_read':room.isRead == 'false'}" >
{{room.contactName}}
<span class="live-chaticon"></span>
</h4>
<span style="float:left"><img src="img/phone.png"/></span>
<p class="user-phoneno mb-0" style="padding:5px;margin-left: 16px;" ng-class="{'not_read':room.isRead == 'false'}">
{{room.phone| bcTelephone:'format'}}
</p>
<p class="user-message mb-0" style="font-size: 12px;" ng-show="room.lastMsg != ''" ng-class="{'not_read':room.isRead == 'false', 'dark-text':room.isRead == 'true'}">
<span ng-if="room.lastMessageDirection == 'out'">You:</span>
<span ng-if="room.lastMessageDirection == 'in'">{{room.contactfName}}:</span>
{{(room.lastMessage| limitTo: 20) + (room.lastMessage.length > 20 ? '..' : '')}}
</p>
</div>
<div class="user-time">
<p class="dark-text">
<span class="time2" ng-show="room.lastMessageAt != ''" am-time-ago="room.lastMessageAt"></span>
</p>
</div>
</li>
</ul>
</div>
<div class="recent-bg" block-ui="loadchat" style="width:61%;position:fixed;top:0;right:0;background-color:white">
<div class="recent-order">
<!-- <div class="recent-text ">
<h4 class="user-name">{{name}} <span class="live-chaticon"></span></h4>
<h5> <span style="float:left"><img src="img/phone.png" height="20px"/></span> {{number| bcTelephone:'format'}} </h5>
</div>-->
<div class="recent-text ">
<div class="row">
<div class="col-md-3">
<h4 class="user-name">{{name}} <span class="live-chaticon"></span></h4>
<!--<h5 class="user-number">{{number}} </h5>-->
<!--<h5 class="user-number"> {{number| bcTelephone:'format'}} </h5>-->
<h5> <span style="float:left"><img src="img/phone.png" height="20px"/></span> {{number| bcTelephone:'format'}} </h5>
</div>
</div>
</div>
</div>
<div class="col-12 pa-0">
<h5 ng-if="text != ''" class="text-center">{{text}}</h5>
<div class="table-responsive">
<div class="frame">
<div ng-show="chats.length != 0">
<ul class="message-box">
<li ng-repeat="chat in chats| orderBy:'createdAt':false" ng-if="chat" ng-class="{'pull-right default-user ': chat.direction == 'out','pull-left client-user':chat.direction != 'out'}">
<p>{{chat.content}} <br>
<span style="font-size: 10px;" am-time-ago="chat.createdAt" ng-class="{'pull-right default-user': chat.direction == 'out','pull-left client-user':chat.direction != 'out'}"></span>
<br>
<span style="font-size: 10px; float: right" > {{chat.status}}</span>
</p>
</li>
</ul>
</div>
<div class="message-sendbtn" style="position:fixed;width:61%" ng-show="is_select_user">
<div class="input-group">
<input type="text" class="form-control message-control" id="mymsg" placeholder="Your message" ng-model="data.message" aria-label="Recipient's username" aria-describedby="basic-addon2" ng-enter="sendMessage(roomId, data.message, name, number, roomName)">
<a href="javascript:void(0)" class="input-group-addon" id="basic-addon2" ng-click="sendMessage(roomId, data.message, name, number, roomName)" ><img src="img/send-icon.png"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
这是我的观点 当节点中出现新消息时,我遇到问题联系人列表是房间阵列得到双重记录,当我发送消息时,它没有显示消息的实时状态,有时候它与错误的节点混淆(当前房间)
通过使用on(&#34; value&#34;)方法被多次调用。
请帮助我,我被困在这里。