CODEWITHSUNDEEP
javascriptangularjsdom
ironsand
ironsand

Reputation: 15151

How to bind text as a DOM object in Angularjs

I want to show MathML DOM object dynamically with Angularjs.

This is what I wrote:

var mathML = angular.module('mathML', ['ngSanitize']);

mathML.controller('mathMLCtrl', ['$scope', function ($scope) {
  $scope.result = function(){
    return "<math xmlns='http://www.w3.org/1998/Math/MathML'><msup><msqrt><mrow><mi>a</mi><mo>+</mo><mi>b</mi></mrow></msqrt><mn>27</mn></msup></math>";
    //return "<p>p tag</p>";
  };
}]);

With ng-bind-html, I can insert text as a HTML text, but MathML's XML is not inserted properly. (All tags are deleted.)

It looks like necessary to insert MathML text as DOM Objects. But I don't know how to do it.

How can I show MathML with Angularjs?

Upvotes: 2

Views: 460

Answers (1)

jgawrych
jgawrych

Reputation: 3542

ng-bind-html sanitizes the output by removing tags that are not listed as "safe". The math tag is not listed under the allowed tags. If you trust this html to never have exploits, you'll want to use the $sce service to mark the code as trusted. See this answer:

https://stackoverflow.com/a/19417443/1248889

Another alternative would be to save this text as a partial, in it's own separate file. Then in your html, use ng-include to load the partial into the dom.

Upvotes: 2

Related Questions