CODEWITHSUNDEEP
javascriptangularjs
Ryan
Ryan

Reputation: 4414

Rendering a template into a trusted HTML string [AngularJS]

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

Upvotes: 4

Views: 1992

Answers (1)

Justin Niessner
Justin Niessner

Reputation: 245489

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

AngularJS: $compile

Upvotes: 1

Related Questions