将带有HTML标记的输出从AngularJs传递到HTML
将带有HTML标记的输出从AngularJs传递到HTML
提问于 2020-03-04 02:42:32
我有一个脚本，它从包含一些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页面应用和标记，而不是像jsfiddle那样将标记显示为输出。
我希望HTML上的输出将显示"Hostname：“行，并带有粗体()和突出显示()。请给我建议。
谢谢
回答 2
Stack Overflow用户
发布于 2020-03-04 02:52:15
您可以使用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>
Stack Overflow用户
发布于 2020-03-04 02:47:57
看起来您可以使用ng-bind-html-unsafe目录将文本解析为html。
<pre ng-bind-html-unsafe="output"></pre>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60513661
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号