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

Posted

技术标签:

【中文标题】将带有HTML标签的输出从AngularJs传递到HTML [重复]【英文标题】：Passing output with HTML tags from AngularJs to HTML [duplicate] 【发布时间】：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。 【参考方案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 没有测试这个特定版本的选项。

以上是关于将带有HTML标签的输出从AngularJs传递到HTML [重复]的主要内容，如果未能解决你的问题，请参考以下文章

将 JSON 从 AngularJS 传递到 Springboot RestController 不起作用

如何使用 angularJs 从 json 值呈现 HTML 标签

使用 angularjs 将图像传递到后端

将数据从带有页面控制器的 uiscrollview 传递到另一个视图控制器 [关闭]

如何将数据从多个视图传递到一个？

是否可以将信息从 Angular 组件传递到 AngularJS 组件？