如何让我的解析 html 显示为 html 而不是纯文本？

Question

这个jsFiddle解释了一切

我的代码分隔主题标签，例如 #riots = <span class="hashtags">#riots</span>，但它被打印为纯文本而不是 html。我做错了什么？

function formCtrl($scope){
    $scope.$watch(function() {
        $scope.description = "Wow, it's crazy over here! #baltimore #riots";
      $scope.vidTags = $scope.description.match(/(^|\s)(#[a-z\d-]+)/ig);   
      $scope.desc = $scope.description.replace(/(^|\s)(#[a-z\d-]+)/ig, "<span class='hashtag'></span>");
    })
}

#description {
    width: 300px;
    height: 3em;
}
.hashtag {
    color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="formCtrl">
    <textarea ng-model="description" id="description"></textarea>
    <br />
vidTags: {{vidTags}}
    <br />
desc: {{desc}}
    <br />

</div>

Answer 1

You now have to use $sce to run your output through a filter, which you can specify to allow the HTML.

We can implement this using $sce.trustAsHtml() by adding a filter to [the] code (outside of the controller). This custom filter will make sure that [the] HTML doesn’t get filtered out by AngularJS 1.2/AngularJS 1.3 or later

来源：

http://creative-punch.net/2014/04/preserve-html-text-output-angularjs/ https://docs.angularjs.org/api/ng/service/$sce

Answer 2

这是一个 Plunker，显示了使用 $sce 的工作示例。

http://plnkr.co/edit/sZliFJjOTiRyFxe7Bdts?p=preview

<html>

<head>
  <script data-require="jquery@*" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>

  <script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="myApp">
  <div ng-controller="formCtrl">
    <textarea ng-model="description" id="description"></textarea>
    <br />vidTags: {{vidTags}}
    <br /><div ng-bind-html="desc"></div>
    <br />
  </div>
  <script>
    var app = angular.module('myApp', []); 
    app.controller('formCtrl', function formCtrl($scope, $sce) {

      $scope.$watch(function() {
        $scope.description = "Wow, it's crazy over here! #baltimore #riots";
        $scope.vidTags = $scope.description.match(/(^|\s)(#[a-z\d-]+)/ig);
        var message = $scope.description.replace(/(^|\s)(#[a-z\d-]+)/ig, '<span class="hashtag"></span>');
        $scope.desc = $sce.trustAsHtml(message); 
      })
    })
  </script>
</body>

</html>

如何让我的解析 html 显示为 html 而不是纯文本？

How can I get my parsed html to appear as html instead of plain text?

javascript

regex

hashtag

angularjs