Question

我在C＃控制器中构建了一些HTML，并将其输入到Angular页面上使用的结果中。它进入页面，但是当它出现时，html是未编码的，并显示为文本，而不是html。

在C＃中：

    [HttpGet]
    public ActionResult Details(Guid id)
    {
        return HandleRequest(() =>
        {
            var customer = _csa.GetCustomer(id);

            var bc = (isMobile) ? string.Empty : CreateBreadCrumbDisplay(id);

            return new
            {
                customer,
                bc
            };
        });
    }

在html中：

<div class="row-fluid" ng-hide="history.bc == null || history.bc.length == 0">
     <div class="span12">
        {{history.bc}}
    </div>
</div>

页面上显示的内容：

<ul class="breadcrumb"><li><a href="/Employee#!Search">Employee Dashboard</a> <span class='divider'>/</span></li><li class='active'>Customer Information and History</li></ul>

应该出现什么：

Employe Dashboard
客户信息和历史

（但由Bootstrap设计，所以它是一个很好的面包屑，而不是视觉上实际的项目符号列表）

所以，基本上，我需要知道html中是否有一种方法可以告诉它将history.bc显示为实际HTML而不是文本？

Answer 1

您需要使用$sce.trustAsHtml(myhtml)来包装您的数据，否则角度不允许这样做。然后你需要在你的html中使用ng-bind-html，绑定到你使用trustAshtml函数的变量。类似的东西：

vm.bcHtml = $sce.trustAsHtml(myhtml);

<div ng-bind-html="vm.bcHtml"></div>

请注意，您需要注入$ sce服务。

Angular JS Api - $sce

以下是关于ng-bind-html的一些信息。

Angular JS Api - ngBindHtml

最后，您需要使用角度$compile服务来注册角度管道中的包含。这是一篇很好描述它的SO帖子。他们使用ng-bind-html-unsafe，但我相信首选方法是我上面描述的方法。

Compiling dynamic HTML strings from database

在Angular中输出HTML，来自C＃Controller

1 个答案: