Question

我有一个帖子文本，我可以在html元素中使用ng-bind-html标签显示。但我想编写一个用户可以编辑帖子的功能。因此，我使用我的后端编码的编码文本为textarea启动ng-modal。文本中包含''这样的字符。当我使用文本启动ng-modal时，这些字符会出现在textarea中。我应该如何填充textarea和连接到textarea的ng-modal并显示正确的文本并允许用户编辑他们的帖子？

这是我到目前为止所做的：

<textarea
    name="title"
    class="textarea post-title-textarea"
    ng-minlength="16"
    ng-maxlength="255"
    required
    mg-autofocus
    ng-model="formData.title"
    textarea-autoresize
></textarea>

我尝试添加ng-bind-html="formData.title"，但只要我还使用用户将编辑的旧文本填充ng-modal，它仍会显示转义的字符。

我该怎么办？

Answer 1

我认为您需要使用用于解析html的ngSanitize。

<script src="angular.js">
    <script src="angular-sanitize.js">

然后在您的应用中包含清理模块

angular.module('app', ['ngSanitize']);

参考：https://docs.angularjs.org/api/ngSanitize

下面举例：

<script>
         angular.module('sanitizeExample', ['ngSanitize'])
           .controller('ExampleController', ['$scope', '$sce', function($scope, $sce) {
             $scope.snippet =
               '<p style="color:blue">an html\n' +
               '<em onmouseover="this.textContent=\'PWN3D!\'">click here</em>\n' +
               'snippet</p>';
             $scope.deliberatelyTrustDangerousSnippet = function() {
               return $sce.trustAsHtml($scope.snippet);
             };
           }]);
     </script>
     <div ng-controller="ExampleController">
        Snippet: <textarea ng-model="snippet" cols="60" rows="3"></textarea>
       <table>
         <tr>
           <td>Directive</td>
           <td>How</td>
           <td>Source</td>
           <td>Rendered</td>
         </tr>
         <tr id="bind-html-with-sanitize">
           <td>ng-bind-html</td>
           <td>Automatically uses $sanitize</td>
           <td><pre>&lt;div ng-bind-html="snippet"&gt;<br/>&lt;/div&gt;</pre></td>
           <td><div ng-bind-html="snippet"></div></td>
         </tr>
         <tr id="bind-html-with-trust">
           <td>ng-bind-html</td>
           <td>Bypass $sanitize by explicitly trusting the dangerous value</td>
           <td>
           <pre>&lt;div ng-bind-html="deliberatelyTrustDangerousSnippet()"&gt;
&lt;/div&gt;</pre>
           </td>
           <td><div ng-bind-html="deliberatelyTrustDangerousSnippet()"></div></td>
         </tr>
         <tr id="bind-default">
           <td>ng-bind</td>
           <td>Automatically escapes</td>
           <td><pre>&lt;div ng-bind="snippet"&gt;<br/>&lt;/div&gt;</pre></td>
           <td><div ng-bind="snippet"></div></td>
         </tr>
       </table>
       </div>

希望它会对你有所帮助。

AngularJS html unescape在ng-modal中

1 个答案:

下面举例：