将带有HTML标签的输出从AngularJs传递到HTML [重复]答案

【问题标题】：Passing output with HTML tags from AngularJs to HTML [duplicate]将带有HTML标签的输出从AngularJs传递到HTML [重复]
【发布时间】：2020-06-16 05:07:59
【问题描述】：

我有一个脚本，它从包含一些 HTML 的 API 调用中获取数据，以便在 HTML 上正确显示数据。我从 python 获取数据并使用flask http post将其保存到AngularJs中的变量中。

请看这个jsfiddle： https://jsfiddle.net/2mydubL8/

HTML：

<div ng-app ng-controller="htmController">
  <input type="submit" ng-click="submit()" value="Submit"></input>
  <pre>{{output}}</pre> </div>

JS：

function htmController($scope) {
  //Result data comes from an API call and looks something like below
  $scope.result = '\r\n<b><mark>Hostname: switch_01:</mark></b>\r\n\r\n\r\nservice password-encryption\r\nservice compress-config\r\n!\r\nhostname switch_01\r\n!\r\nlogging buffered informational\r\nno logging console\r\naaa new-model\r\naaa authentication login default group tacacs+ line\r\n\r\n<b><mark>Hostname: switch_02:</mark></b>\r\n\r\n\r\nservice password-encryption\r\nservice compress-config\r\n!\r\nhostname switch_02\r\n!\r\nlogging buffered informational\r\nno logging console\r\naaa new-model\r\naaa authentication login default group tacacs+ line\r\n';  
  $scope.submit = function () {
     $scope.output = $scope.result;
    }
};

我希望 HTML 页面应用 and 标记，而不是像在 jsfiddle 中那样将标记显示为输出。

我希望 HTML 上的输出将显示“主机名：”行，并带有粗体 () 和突出显示（）。请指教。

谢谢

【问题讨论】：

试试ng-bind-html。

标签： javascript html angularjs

【解决方案1】：

你可以使用`ngSanitize`来渲染html

var app = angular.module("myApp", ['ngSanitize']);
app.controller("htmController", htmController);

function htmController($scope) {
  //Result data comes from an API call and looks something like below
  $scope.result = '\r\n<b><mark>Hostname: switch_01:</mark></b>\r\n\r\n\r\nservice password-encryption\r\nservice compress-config\r\n!\r\nhostname switch_01\r\n!\r\nlogging buffered informational\r\nno logging console\r\naaa new-model\r\naaa authentication login default group tacacs+ line\r\n\r\n<b><mark>Hostname: switch_02:</mark></b>\r\n\r\n\r\nservice password-encryption\r\nservice compress-config\r\n!\r\nhostname switch_02\r\n!\r\nlogging buffered informational\r\nno logging console\r\naaa new-model\r\naaa authentication login default group tacacs+ line\r\n';  
  $scope.submit = function () {
     $scope.output = $scope.result;
    }
};

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-sanitize.js"></script>
<body>

<div ng-app="myApp" ng-controller="htmController">
  <input type="submit" ng-click="submit()" value="Submit">
    <p ng-bind-html="output"></p>
</div>
</body>

【讨论】：

我正在运行 'angular.js@1.3.0-beta.5' 不幸的是，更新不是一个选项，因为它是一个遗留应用程序。看起来它不像 ngSanitize 给我'错误：[$injector:modulerr]'
您需要在脚本中添加 angular sanitize，ajax.googleapis.com/ajax/libs/angularjs/1.3.0/…

【解决方案2】：

看来您可以使用ng-bind-html-unsafe 目录使其将文本解析为html。

<pre ng-bind-html-unsafe="output"></pre>

【讨论】：

ng-bind-html-unsafe 指令很久以前就从 AngularJS 框架中删除了。
@georgeawg 我自己也不知道。它只是在他们提供的小提琴中工作。因此，如果该小提琴包含他们正在使用的 angular 版本，我希望它能够工作。
那个小提琴使用 AngularJS v1.1.1。它已经过时并且缺少最新的安全补丁。
@georgeawg 所以告诉作者。
@Taplar 它正在运行 1.1.1 的 jsfiddle 上工作，但不在运行 1.3.0-beta.5 的我的应用程序中。 jsfiddle 没有测试这个特定版本的选项。

你可以使用ngSanitize来渲染html

你可以使用`ngSanitize`来渲染html