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

Posted 2023-03-05

【中文标题】如何使用 angularJs 从 json 值呈现 HTML 标签

【英文标题】：How to render a HTML tag from json value using angularJs

【发布时间】：2015-09-28 18:04:38

【问题描述】：

//json是这样的

"_unparsedString": "<p>test<\/p>"

// html

<div>Preamble : 'item2._unparsedString'</div>

//输出

Preamble : <p>test<\/p>

但是如何渲染该标签并使用 angular 显示它？

//输出应该是这样的

 Preamble : test

【参考方案1】：

您应该使用sce.trustAsHtml 来预处理html，而不是直接将字符串传递给查看。

$scope.bindHTML = $sce.trustAsHtml(item2._unparsedString);

然后在你的视图模板中，使用 ng-bind-html 来处理 html 绑定。

<div>Preamble : <div ng-bind-html="bindHTML"></div></div>

正如你提到的，你有一个对象数组，在你的控制器中转换它们并不容易，你可以将$sce绑定到你的$scope，然后在你的视图中调用trustAsHtml

所以在你的控制器中

myapp.controller('mainController', function ($scope, $http, $filter, $sce) 
   $scope.$sce = $sce;
...

然后在你的 html 视图中

<div>Preamble $index+1 : <span ng-bind-html="$sce.trustAsHtml(item1.Preamble._unparsedString)"></span></div>

【讨论】：

我有对象数组..所以如何应用它，因为它不是单个值..我必须在 ng-repeat 内应用

@Flash 查看我的更新。您可以将$sce 注入您的控制器。

@Flash see jsfiddle.net/1joo0j77/5 运行项目，在第二个选择框中选择“市场”。你可以看到结果。

【参考方案2】：

请检查这个工作示例：http://jsfiddle.net/Shital_D/b9qtj56p/6/

下载文件 - angular-sanitize.js 并将其包含在您的应用中。

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

app.controller('myController', function($scope,$compile) 
    $scope.html = '<p>Your html code</p>';
);

<div ng-app="myApp">
     <div ng-controller="myController">
     <p ng-bind-html="html"></p>
</div>

【讨论】：

成功了，但是 angular_js 和 angular-sanitize.js 有什么不同