I currently have a Chat application which opens a new Chatwindow for every Chat (just like on facebook & co). To get this working so far I did some weird hacks since all of the n open chatwindows use the same $scope Variables. This is neither good programming nor does it help with bugfixing later on.
Therefore I'd like to redesign the chat part of my application and use one MessageCtrl instance for every Chatwindow. Is this possible in angular.js and if yes, how could I implement it?
If not, can you give me some guidelines on how to implement it "the angular way"?
edit: What I'm currently doing:
I create the Chatwindow from the MessageCtrl and save the necessary data into a MessageService. Since the next time a user writes a message in one of the Chatwindows I dont know if the $scope Variables are set correctly I check the MessageService again to find the correct Chat.
The problem is currently the only way of knowing what the correct chat is for me by saving the chat id in the parent <div id=<chatId> of the chatwindow. Thats far from good, but the only solution I got working so far
edit2: my code:
When a user starts a new Chat the following happens in some Ctrl:
`$rootScope.newChat = {roomId: roomId};
the MessageCtrl listens on this:
$rootScope.$watch('newChat', function (newVal, oldVal) {
startChatWindow();
// other preperation like setting $scope.roomId
}
startChatWindow() just appends the following html:
var $el = "<div id='" + $scope.roomId + "'class='bottomChat'>";
<!-- other things, like displaying the old messages -->
</div>";
$("#messageTab").append($compile($el)($scope));
PS: by chatwindow I just mean a visually appearing window, in reality it's just a styled like a window. This also means that every chatwindow uses the same messageCtrl. Which also means that I loose reference to e.g. $scope.roomId
edit3: SOLUTION
after removing the jQuery code and creating a directive every chatWindow has it's own Ctrl.