javascript - 如何使用 AngularJS/Ionic 中现有的章节选择功能

Question

我目前正在针对现有的 PHP 后端和数据库编写一个新的 Ionic/AngularJS 应用程序。目前，api/数据库将 HTML 文档存储在数据库中，然后将字段替换为客户数据，就像标准报告工具所做的那样(也可以将其描述为邮件合并)。他们还使用 # anchor 标记来描述章节，并有一个选择/选项下拉菜单，用于快速跳转到不同的章节。所有章节选项都位于与文档本身不同的字段中。

问题:AngularJS 在通过 ng-bind-html 填充内容和章节下拉列表时删除了 Anchor 和 Option 标签。如果可能的话，我需要弄清楚如何在前端处理这个问题，因为更改后端将花费大量的时间和金钱。

示例 1:ng-bind-html 之前的 Javascript 对象中的部分 HTML 文本

<h3><a id="1"></a>PRE-EMPLOYMENT</h3>
<p><strong>The Application Process:</strong></p>
<p><strong>The application process is the initial opportunity to avoid individuals prone to workplace violence and terror activities. Employers often overlook this opportunity to prevent problems. Look for discrepancies, individuals with poor employment histories often fabricate information on their applications. Be cautious of:</strong></p>
<p>&nbsp;</p>
<p>&bull; Gaps in employment.</p>
<p>&ndash; Potential problem employees often leave with no substitute employment.</p>
<p>&ndash; Gaps in employment are often explained with, &ldquo;I could not find a job,&rdquo; or a similar statement.</p>

示例2:使用ng-bind-html后网页内容:

<h3><a></a>PRE-EMPLOYMENT</h3>
<p><strong>The Application Process:</strong></p>
<p><strong>The application process is the initial opportunity to avoid individuals prone to workplace violence and terror activities. Employers often overlook this opportunity to prevent problems. Look for discrepancies, individuals with poor employment histories often fabricate information on their applications. Be cautious of:</strong></p>
<p>&nbsp;</p>
<p>• Gaps in employment.</p>
<p>– Potential problem employees often leave with no substitute employment.</p>

请注意， anchor block 中的 id 已在文本中删除。我在这里研究了很多东西，但还没有找到解决这个问题的方法。删除的发现是在我们实现章节的选择下拉列表时发现的，其中 AngularJS 从现有章节下拉列表中删除了所有标签，如示例 3 和 4 所示。

示例 3:目录的对象数据

<option value="#1">Pre-Employment</option>
<option value="#2">The Interview Process</option>
<option value="#3">Drug Testing</option>
<option value="#4">Violence Prevention Program</option>
<option value="#5">Responsible Person</option>
<option value="#6">Crisis Team</option>

示例 4:处理来自 ng-bind-html 的数据

Pre-Employment
The Interview Process
Drug Testing
Violence Prevention Program
Responsible Person
Crisis Team

Answer 1

我的解决方案是添加一个“不安全”的 Angular 过滤器。

.filter('unsafe', function($sce) {
  return function(val) {
    return $sce.trustAsHtml(val);
  };
})

这使我能够将 ng-data-bind-html 过滤为真正不安全的 html。

<div data-ng-bind-html="documentDetail.Content | unsafe"></div>