angularjs - 如何在 View 中使用 html 元素呈现基本 HTML 代码

Question

我有一个表单 html 如下:

<div class=\"container\">\r\n\t<div class=\"clearfix row
\">\r\n\t\t<div class=\"col-md-12 column\">\r\n\t\t\t<h3>\r\n\t\t\t\tNew form created\r\n\t\t\t<\/h3
>\r\n\t\t\t<div class=\"form-group\">\r\n\t\t\t\t <label><strong>Enter   name<\/strong><\/label><input
name=\"1430985388220267#enter_name\" id=\"1430985388220267\" class=\"form-control\" grid-name=\"Enter
 name\" type=\"text\" \/>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t<\/div>\r\n<\/div>

我想在移动应用程序中显示此表单。我在 ionic 框架和带有 Angular JS 的 cordova 中开发的移动应用程序。当我尝试将表单显示为 html 时，它会使用标题、粗体、内容等标签等基本元素呈现，但未显示输入标签，否则我可以说 html 的基本数据输入元素，如复选框、单选按钮等不显示。我在 View 中这样做:

<ion-view title="Fill the Form">
<ion-content class="padding-vertical" ng-repeat="htmlValue in HTML">
<div ng-bind-html="getHtml(htmlValue)">

</div>
{{htmlValue}}
    <div class="clearfix"></div>
</ion-content>
</ion-view>

我的 getHtml 函数是这样的:

    $scope.getHtml = function(html){
        var trusted = $sce.trustAsHtml(html);
        return trusted;
    };

我也修改了:

angular.module('iot', ['ionic','chart.js','ngSanitize'])

我将 REST 响应中的代码推送到名为 HTML 的数组中

但我仍然没有得到预期的输出在这种情况下还剩下什么？任何帮助将不胜感激。

Answer 1

使用过滤器:

// Filter to enable HTML tags
app.filter('unsafe', function ($sce) {
    return function (val) {
        return $sce.trustAsHtml(val);
    };
});

然后将其与过滤器(在本例中为“不安全”)一起包含在您的 HTML 标记中，例如:

<!-- i.detail will be your valuable -->
<div ng-bind-html="i.detail | unsafe"></div>