Odtnhj

I am developing a support chat system. Whenever a support staff clicks on support icon, support screen (staff-room.html) opens which has list of client waiting for request to be attended. Following is an extract of code from the above file

<md-list-item ng-repeat="client in clientChannelList | filter: searchText">
 <div class="channel" layout="row" layout-align="center center">
 <div class="md-list-item-text" layout="column" layout-align="center start" flex>
 <h3 class="name"> client.senderName</h3>
 <span class="site-name"> client.siteName</span>
 </div>
 </div>
 <button chat-popup-box>Attend</button>
</md-list-item>

<div flex layout="column">
 <md-toolbar class="background-transparent">
 <div class="md-toolbar-tools" layout="row"></div>
 </md-toolbar>
 <md-divider></md-divider>
 <div id="chat-popup"></div>
 <md-divider></md-divider>
</div>

I have an attribute directive chat-popup-box (present in button element) which initialises on clicking of a button. Inside this directive I am creating an html element which creates chat pop up window and appending it with element having id chat-popup in the parent (staff-room.html).

var htmlelement = `<div class="popup-box chat-popup">Some stuff</div>`
var compiledElement = $compile(htmlelement)($scope);
var pageElement = angular.element(document.getElementById("chat-popup"));
pageElement.append(compiledElement);

Now the problem is whenever I am changing the state(navigating to any other module) and coming back, I am loosing the HTML which I have appended in <div id="chat-popup"></div> from DOM. Hence I am loosing chat window pop up.
So Before changing state view DOM was something like this

<div id="chat-popup">
 <div class="popup-box chat-popup">Some stuff</div>
</div>

But after changing state and coming back to same state DOM is like this

<div id="chat-popup"></div>

While debugging I found out that directive is not being destroyed as even after changing state, flow was going inside the chat-popup-box directive but HTML which I have appended is getting removed from DOM. Is there a way to prevent that?

A good start might be to code your page in a more AngularJS-y way. The idea is that values are stored and manipulated in the various scope objects and component controllers. I'm not sure which part of the html is replaced, in your case, when you change to another module, but if you stay within the same app, your html will be re-rendered, including your button and functionality, but the popup will not appear until you press the button (again). If you want the popup to be open the next time you arrive on this page, you will have to store this fact in code somewhere. In AngularJS, services are typically used for this purpose.

You could do something like this:

<md-list-item ng-repeat="client in clientChannelList | filter: searchText">
 (...)
 <button ng-click="controller.changeActiveClient()">Attend</button>
</md-list-item>

<div flex layout="column">
 (...)
 <div id="chat-popup">
 <div class="popup-box chat-popup" ng-if="controller.activeClient">Some stuff</div>
 </div>
 <md-divider></md-divider>
</div>

(better yet, create a component to hold your popup box)

Then, in your controller have something like this:

this.activeClient = staffRoomService.getActiveClient();
this.setActiveClient = staffRoomService.setActiveClient;

Or something; then, create the staffRoomService to store your active client. Anyway, do read up on scopes, components, and "the AngularJS way". It will make your life better and more fun. https://docs.angularjs.org/guide/concepts