1

I have some HTML being built in my C# controller, and I'm feeding it into the result to be used on an Angular page. It gets to the page, but when it does, the html is unencoded, and shows up as text, not html.

In the 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
            };
        });
    }

In the html:

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

What appears on the page:

<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>

What should appear:

(but styled by Bootstrap so it's a nice Breadcrumb, and not visually an actual bulleted list)

So, basically, I need to know if there's a way in the html to tell it to display history.bc as actual HTML, and not as text?

PKD
  • 685
  • 1
  • 13
  • 37

1 Answers1

1

You'll need to use $sce.trustAsHtml(myhtml) to wrap your data, angular disallows this otherwise. Then you need to use the ng-bind-html in your html, bound to the variable you've use the trustAshtml function on. Something like:

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

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

Note you'll need to inject the $sce service.

Angular JS Api - $sce

Here's some info on ng-bind-html.

Angular JS Api - ngBindHtml

Finally, you'll need to use the angular $compile service to register inclusion in the angular pipeline. Here's a SO post that describes it well. They use ng-bind-html-unsafe, but I believe the preferred method is the one I described above.

Compiling dynamic HTML strings from database

Community
  • 1
  • 1
Grant H.
  • 3,689
  • 2
  • 35
  • 53
  • Well, this helped, but perhaps not quite in the way that you intended. The key was that ng-bind. I read up on that a bit, and by simply putting this tag in place of the `{{history.bc}}`, I was able to get it to work right away: `
    `     – PKD Feb 13 '15 at 16:48
  • 1
    If you're using Angular 1.2+, ng-bind-html-unsafe has been deprecated. It is, by it's own definition, unsafe. I'd strongly suggest you go the $sce and ng-bind-html route. http://stackoverflow.com/questions/19415394/with-ng-bind-html-unsafe-removed-how-do-i-inject-html – Grant H. Feb 13 '15 at 18:09
  • The codebase we're in at the moment, actually, is 1.1. We're planning the upgrade, but it's "down the road" still. – PKD Feb 13 '15 at 19:19