时间戳

首页 > 解决方案 > 使用 ng-bind-html 隐藏“<>”中的单词

angularjs - 使用 ng-bind-html 隐藏“<>”中的单词

问题描述

我正在尝试创建一个接受自由文本并将文本显示为输出的文本框。例如，如果我输入"Angular"，结果应该是Angular。无论使用什么字符，它都应该按原样显示。

为此，我正在使用ng-bind-html. 我看到的问题是，每当我添加一个包含在中的术语时"<>"，该术语都不会作为一个整体出现。例如，如果我输入"<Angular>"结果是"".

如何在"<>"不使用的情况下显示包含在中的单词ng-bind-html，但获得相同的结果？

标签： angularjsng-bind-html

解决方案

如果您只想显示为文本，可能的解决方案是像 <Angular> 这样对标签进行编码/解码。

<body ng-app="bindHtmlExample">
  <div ng-controller="ExampleController">
    <p ng-bind-html="myHTML"></p>
  </div>
</body>

在控制器中：

(function(angular) {
  'use strict';
angular.module('bindHtmlExample', ['ngSanitize'])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.myHTML =
       'I am an <code>HTML</code>string with ' +
       '<a href="#">links!</a> and other <em>stuff</em>&lt;Angular&gt;';
  }]);
})(window.angular);

推荐阅读