Question

我正在开发一个支持聊天系统。每当支持人员单击支持图标时，支持屏幕（ 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元素，该元素将创建聊天弹出窗口，并将其添加到父元素（ staff-room.html ）中具有 id chat-popup 的元素。

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

现在的问题是，每当我更改状态（导航到任何其他模块）并返回时，我都失去了从DOM附加到<div id="chat-popup"></div>中的HTML。因此，我失去了弹出的聊天窗口。所以在更改状态视图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中删除。有办法防止这种情况吗？

Answer 1

一个好的开始可能是以更多的AngularJS-y方式对页面进行编码。这个想法是在各种作用域对象和组件控制器中存储和操纵值。我不确定在您的情况下，替换到另一个模块时会替换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

更改视图时，Angular指令中附加的html元素已从DOM中删除

1 个答案: