Ionic v1 / Angular - 从 DOM 中删除以前的离子视图答案

【问题标题】：Ionic v1 / Angular - Remove Previous ion-view from DOMIonic v1 / Angular - 从 DOM 中删除以前的离子视图
【发布时间】：2019-12-13 02:51:38
【问题描述】：

我正在修改一个用 Ionic v1 编写的应用程序。

有一个名为“客户资料”的主视图，其中有两个其他视图的链接：支持请求和投诉。

在支持请求视图中，有一个 ID 为“description”的 TextArea，还有一个在点击按钮时调用的函数，该函数使用 jQuery 获取此文本区域的内容。

var request_description = $("#description").val();

执行此功能后，您将返回主视图（客户资料）。

如果然后您打开“投诉”视图，这里还有一个 id 为“description”的文本区域，还有另一个函数执行相同的操作，并使用上面的相同代码使用 jQuery 获取该文本区域的内容。

问题是这段代码失败了，因为之前打开的“支持请求”的 ion-view 仍然存在于 DOM 中——即id 为 "description" 的元素的第一次出现被匹配，它属于前一个视图，而不是当前可见的-。我知道问题可能是使用选择器直接从 DOM 获取值，这与您应该做的相反，但由于这是旧代码，我也没有时间更改它很多...

1) 我的问题是为什么会发生这种情况，这是 Angular 的正常行为 - 将以前的视图保留在 DOM 中 - 还是我遗漏了什么？

2) 除了给每个文本区域一个不同的 id，我可以做些什么来从 DOM 中删除以前的 ion-view 或完全阻止这种行为。

【问题讨论】：

标签： javascript jquery angular ionic-framework

【解决方案1】：

经过一番挖掘，我发现在我的 app.js 中有以下代码触发了视图之间的切换：

        .state('app.Complaints', {
            url: '/Complaints',
            views: {
                'menuContent': {
                    templateUrl: 'templates/Client/Complaints.html',
                    controller: 'ComplaintsCtrl'
                }
            }
        });
        .state('app.SupportRequest', {
            url: '/SupportRequest',
            views: {
                'menuContent': {
                    templateUrl: 'templates/Client/SupportRequest.html',
                    controller: 'SupportRequestCtrl'
                }
            }
        });

这里控制器绑定到一个HTML模板，并且声明了这个视图/控制器的Url。在这里，您可以向传递给此初始化的对象添加新道具。这个道具被称为cache，它可以设置为 false 以阻止视图在您离开后停留在 DOM 中。因此，在修改了我的 app.js 之后，旧的 ion-view 容器在我离开上述视图后从 DOM 中消失了。

.state('app.Complaints', {
            cache: false,
            url: '/Complaints',
            views: {
                'menuContent': {
                    templateUrl: 'templates/Client/Complaints.html',
                    controller: 'ComplaintsCtrl'
                }
            }
        });
        .state('app.SupportRequest', {
            cache: false,
            url: '/SupportRequest',
            views: {
                'menuContent': {
                    templateUrl: 'templates/Client/SupportRequest.html',
                    controller: 'SupportRequestCtrl'
                }
            }
        });

【讨论】：