Rendering a template into a trusted HTML string [AngularJS]

Question

I'm using AngularJS Toaster found here to show ModelState errors from my API. You are able to pass AngularJS Toaster trusted HTML and I'd like to pass it HTML from a rendered template:

<script type="text/ng-template" id="modelStateErrors.html">
    <div>{{response}}</div>
</script>

Here's the code for popping up the toast:

app.service("errorService", ["$templateCache", "toaster", function ($templateCache, toaster) {
    this.catchErrors = function (response) {
        // Pass "response" to the template to render.
        toaster.pop("error", "", $templateCache.get("modelStateErrors.html"), 0, true);
    };
}]);

This code only produces the <div>{{response}}</div> as is, unparsed.

EDIT: So I tried adding:

$compile($templateCache.get("modelStateErrors.html"))(response);

and I get this error message

Error: [jqLite:nosel] Looking up elements via selectors is not supported by jqLite! See: http://docs.angularjs.org/api/angular.element

Justin Niessner · Accepted Answer · 2013-11-08 01:45:06Z

1

Once you retrieve the template from the $tempateCache, you still need to compile it before writing it to the DOM:

AngularJS: $compile

answered Nov 8, 2013 at 1:45

Justin Niessner

246k40 gold badges416 silver badges546 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ryan Over a year ago

So I tried $compile($templateCache.get("modelStateErrors.html"))(response); but I get Error: [jqLite:nosel] Looking up elements via selectors is not supported by jqLite! See: docs.angularjs.org/api/angular.element

Collectives™ on Stack Overflow

Rendering a template into a trusted HTML string [AngularJS]

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related