How to bind text as a DOM object in Angularjs

Question

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?

score 2 · Accepted Answer · edited May 23 '17 at 10:32

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.

How to bind text as a DOM object in Angularjs

1 Answers1