So when the user logs in and has unread messages, the user is automatically connected to a private chat with the another user via this event.
channel.on("unread_messages", (users) => {
if (!users.users[0]) {
return;
}
var new_channel = Chat.createNewPrivateChannel(users.users[0], $rootScope.user.id)
Chat.connectToPrivateChannel(new_channel).then((private_channel) => {
$rootScope.privateMessages = Chat.getMessages()
$rootScope.privateChannel = private_channel
})
})
If they don’t have unread messages they have to click on a button to display a chat button that will open a messagebox for them to send messages. The button(not the chat button) calls this function and it is in my chatcontroller.
$scope.startPrivateChat = function(event) {
var id1 = ($(event.currentTarget).attr("agent-id"));
var id2= $rootScope.user.id;
// this just returns a string private:3:23 for example by sorting
// the ids and joining them via colon.
var new_channel = Chat.createNewPrivateChannel(id1, id2)
var current_channel = Chat.getPrivateChannel();
if (current_channel) {
if (current_channel.topic == new_channel) {
return;
}
Chat.leavePrivateChannel(); // this just does channel.leave() and stop duplicate joins.
}
Chat.connectToPrivateChannel(new_channel).then((channel) => {
$rootScope.privateMessages = Chat.getMessages();
$rootScope.privateChannel = channel;
$scope.$apply();
})
}
Now I have a directive with three isolated scopes and the main parts of that directive that I want to show are these.
return {
restrict: 'E',
scope: {
user: '=user',
messages: '=messages',
channel: '=channel'
},
link: (scope, element, attrs) => {
...code
scope.channel.on("message_created", (message) => {
$timeout(() => {
scope.messages.push(message)
let el = element.find(".messages-container")
if (el[0].scrollHeight - el.scrollTop() < el[0].clientHeight + 200) {
setTimeout(() => { el[0].scrollTop = el[0].scrollHeight })
}
})
... more code goes here
the message_created is an event that gets binded to $rootScope.privateChannel object because of the two way binding.
And in several html pages the html code for my directive looks like this.
<chatbox
ng-if="privateChannel"
user="user"
channel="privateChannel"
messages="privateMessages">
</chatbox>
The problem goes like this. If the user has unread messages, then I join that private chat and the message_created event binding is attached to the $rootScope.privateChannel object. Then if I leave that private chat and start another private chat(this is another call to startPrivateChat), I lose the message_create event binding.
Why is that and what can I do to fix that?
Here is an image of what I’m talking about.
