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?
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.
Related
I have an Angular template that is trying to grab a string that is an HTML element, but the string is not being rendered properly.
Angular Html (fyi this is a subitem in a ng-repeat):
<div class="right-column">{{item.map[label]}}</div>
This string is pulled in and essentially will be formatted such as:
" Click Here "
The result with this templating is the exact string being shown in the DOM (with some html entities substituted in).
The resulting element in the DOM looks like:
<div class="right-column ng-binding"><a href="..." target="_blank">Click Here</a></div>
I did notice that if I edit the HTML in the browser dev tools and replace the html entities (< and >) with the actual characters < and > that the html element is being rendered correctly.
I have tried using [innerHTML]="item.map[label]" in the templating, which results in nothing being rendered. I have also tried ng-bind-html="item.map[label]" which was giving errors even when using ngSanitize in the controller js file.
I am not sure what else to try for a proper fix. If there is a way I can format the string that is passed in without messing with the angular template, that would be preferred since there are other formats that are passed into the template other than just this tag style.
I see there's a typo
" target="_blank"> Click Here "
should be:
" Click Here "
I think binding to [innerHTML] should work, if it doesn't work you can tell angular that the HTML is safe and you by pass the sanitizing process. You achieve it by creating a pipe that apply DomSanitizer's bypassSecurityTrustHtml on the HTML string.
Example slackblitz:
https://stackblitz.com/edit/angular-2baxog
As a reference you read more here
Angular HTML binding
I am trying to create an html elemnt from string in js.
The string is: "<p class='text-muted'> come and see how good I look </p>".
In the past I did this with php by echo it out and now I build the client side only with angularJS and I have no clue how to do it.
I tried to bind the string to the page but, as expected, it prints the whole string without encode the string to html elemnt..
I tried to look for an answer in the internet and specificly in this community without succuess..
Does it possible, and if so, How?
Thanks in advance
You can use the ng-bind-html directive to bind a string of html to an element. The string should be sanitised first for example by injecting $sceand calling $sce.trustAsHtml() on the string to bind.
Example controller:
app.controller('MainCtrl', function($scope, $sce) {
$scope.template = $sce.trustAsHtml('<p class="text-muted"> come and see how good I look </p>');
});
And in html
<div ng-bind-html="template"></div>
Here's a quick example plunker
You can type in html and click to bind it
You can attach a String definition of html to any DOM Elment using the property 'innerHTML'.
yourDomEl.innerHTML = '<div class="your-class"><a>Link</a></div>';
I found a problem in changing html of div:
document.getElementsByClassName("lab")[0].setAttribute("ng-bind-html", "binds");
$scope.binds="<h1>run</h1>";
I am setting attribute ng-bind-htmlin java script because I have have integrated some plugin in my code in which div of class="lab" is getting declared through JavaScript. The attribute binds is attached properly, I checked this in inspect element. In fact whenever I attached property of ng-bind-html in JavaScript then ng-bind-html does not work. What is the correct way to do it? There is no error in the code.
Basically you have added ng-bind-html attribute dynamically, which will add directive attribute to the DOM but ng-bind-html directive wouldn't get evaluated the html content. You need to recompile that DOM using
$compile(document.getElementsByClassName("lab")[0])($scope)
To making sure this should work you need to add ngSanitize module in your angular app.
Demo plunkr
The way you are doing is not a standard way of doing DOM manipulation
in AngularJS. The standard approach would be keep ng-bind-html attribute there itself in html rather than adding it dynamically.
Standard way
HTML
<h1>Cleaner way</h1>
<pre ng-bind-html="binds"></pre>
Code
(function(angular) {
'use strict';
angular.module('bindHtmlExample', ['ngSanitize'])
.controller('ExampleController', ['$scope', '$compile', function($scope, $compile) {
$scope.binds="<h1>run</h1>";
}]);
})(window.angular);
Plunkr
I'm using a combination of Angular and a contenteditable div to try and create a two way binding that I can later use an Angular controller to manipulate the data. Everything has been working great, with the exception of certain html characters that make there way into the model.
For example, when I type & I get & when there is a nonbreaking space I get nbsp;
How do I modify the contenteditable directive to clean the encoded values out and only keep the unencoded versions?
Plunkr here - http://plnkr.co/edit/ToylycanYcMJq15K36Yd?p=preview
You will see in the contenteditable directive I have this line:
html = element.html().replace(' ','');
To try and replace the values, but it's having no affect...
Although you can do something like this, but I think you would be better using input or textarea for the same. According to docs AngularJS Models support only input, select or textarea.
Also there is an open issue for the same problem that you are facing.
Here is the code if you intend to use contenteditable div:
var myApp = angular.module('app',[]);
myApp.controller('chatterCtrl', ['$scope', function($scope) {
$scope.$watch('comment', function(){
if($scope.comment != undefined){
$scope.comment = unescape($scope.comment);
}
}, true);
}]);
I want to append the value as html in angular
<div class="storycontent" ng-class="{show: show}">
{{review.name}}: {{review.story}}
</div>
Here in the {{review.story}} I will have value like <b>hello</b><i>something</i> etc
The problem is its displaying the content as <b>hello</b><i>something</i> instead of hellosomething (ie the styling is not applied)
I have to use jQuery to do this
$(".content").each(function () {
$(this).html($(this).text())
});
How can i directly append as .html() instead of .text() in angular?
You don't even need Jquery for that. ng-bind-html can do the trick by himself.
<div class="storycontent" ng-class="{show: show}">
{{review.name}}:
<span ng-bind-html="review.story"></span>
</div>
Moreover, it's also better to add this on your controller when you get the value. Because without this, ng-bind-hmtl isn't safe.
$scope.review.story = $sce.trustAsHtml($scope.review.story);
Note : $sce have to be injected in your controller. It's not available directly with angularJS.
.controller('ControllerName', ['$scope', '$sce', function($scope, $sce) {...
You can use directive ngBindHtml, more info here: https://docs.angularjs.org/api/ng/directive/ngBindHtml
Also you have to remeber that before binding html you have to ensure Angular that it is safe. You can use ngSanitize for it and $sce.trustAsHtml function:
https://docs.angularjs.org/api/ng/service/$sce#trustAsHtml
use ng-bind-html="expression"
expression is your html here
You can use ng-bind-html in angular.
By Docs: ng-bind-html
Evaluates the expression and inserts the resulting HTML into the
element in a secure way. By default, the resulting HTML content will
be sanitized using the $sanitize service. To utilize this
functionality, ensure that $sanitize is available, for example, by
including ngSanitize in your module's dependencies (not in core
Angular). In order to use ngSanitize in your module's dependencies,
you need to include "angular-sanitize.js" in your application.
Use: ng-bind-html="review.story">
Refer docs