Добавленный HTML-элемент внутри угловой директивы удаляется из DOM при изменении вида - PullRequest
Новая
       17

Добавленный HTML-элемент внутри угловой директивы удаляется из DOM при изменении вида

0 голосов
/ 15 ноября 2018

Я занимаюсь разработкой системы поддержки. Когда сотрудник службы поддержки нажимает на значок службы поддержки, открывается экран поддержки ( staff-room.html ), в котором содержится список клиентов, ожидающих запроса на участие. Ниже приведен фрагмент кода из вышеуказанного файла 

<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>

У меня есть директива атрибута chat-popup-box ( присутствует в элементе кнопки ), которая инициализируется при нажатии кнопки. Внутри этой директивы я создаю html-элемент, который создает всплывающее окно чата, и добавляю его с элементом, имеющим id chat-popup в родительском элементе ( 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);

Теперь проблема в том, что всякий раз, когда я меняю состояние (переходя к любому другому модулю) и возвращаюсь, я теряю HTML-код, добавленный в <div id="chat-popup"></div>, из DOM. Следовательно, я теряю всплывающее окно чата. Так что до изменения состояния представления DOM было что-то вроде этого 

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

Но после изменения состояния и возвращения в то же состояние DOM выглядит следующим образом 

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

Во время отладки я обнаружил, что директива не уничтожается, поскольку даже после изменения состояния поток шел внутри директивы chat-popup-box, но добавленный мною HTML удаляется из DOM. Есть ли способ предотвратить это?

1 Ответ

0 голосов
/ 16 ноября 2018

Хорошим началом может быть кодирование вашей страницы более AngularJS-у. Идея состоит в том, что значения хранятся и обрабатываются в различных объектах области и контроллерах компонентов. Я не уверен, какая часть HTML заменяется, в вашем случае, когда вы переходите на другой модуль, но если вы остаетесь в том же приложении, ваш HTML будет перерисован, включая вашу кнопку и функциональность, но всплывающее окно не появится, пока вы не нажмете кнопку (снова). Если вы хотите, чтобы всплывающее окно было открыто при следующем посещении этой страницы, вам нужно будет где-то сохранить этот факт в коде. В AngularJS службы обычно используются для этой цели.

Вы могли бы сделать что-то вроде этого: 

<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>

(еще лучше, создайте компонент для хранения всплывающего окна)

Тогда в вашем контроллере есть что-то вроде этого: 

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

Или что-то; затем создайте staffRoomService для хранения вашего активного клиента. В любом случае, читайте о примерах, компонентах и ​​«пути AngularJS». Это сделает вашу жизнь лучше и веселее. https://docs.angularjs.org/guide/concepts

...