I'm working on an Angular 1X application which has stored all icon labels into a js object like this
var labels={
........
iconlabel_o2:"O<sub>2</sub>",
iconLabel_co2:"CO<sub>2</sub>",
iconLabel_h20:"H<sub>2</sub>O",
........
}
and the iconLabel values are called into HTML
<p>{{u.iconLabel}}</p>
but the values are not getting rendered as subscripts. It just shows the whole string. like this...
O<sub>2</sub>
CO<sub>2</sub>
H<sub>2</sub>O
How to fix this?
You can use the ng-bind-html directive to achieve this:
<p ng-bind-html="u.iconLabel"></p>
Please also have a look at a similar question: AngularJS - Render HTML tags that are contained in a string
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 started to learn Angular recently and I just started to code a project which contains some articles.
Articles are passed from backend completely. (a thing like it)
<p onclick="function" name="itsName" data-info="data">text</p>
its tags and all attributes are saved in DB exactly like the mentioned example.
Now I am looking to show this data through angular.
[innerHTML] is the common way everyone uses. but it does not render tag's attributes. so my code is not working!
this.content="<div><h2 class='textAlignCenter' (click)='hello()' name='thisis' >"+id+"</h2><div>";
But it shows a thing like it after render :
<div><h2 class='textAlignCenter'>"+id+"</h2><div>
but I am looking to get a result like it.
<div><h2 class='textAlignCenter' (click)='hello()' name='thisis' >changed content - >333</h2><div>
I'm building a Javascript based UI that generates code based on the UI. I got the code generation working. the code is saved in a string. I tried formatting it, indenting it, but I don't know how anymore. Is there a way to put out the code formatted?
For example if I have this string:
"<body><div><h1>Hi</h1></div></body>"
being output like this:
<body>
<div>
<h1>
Hi
</h1>
</div>
</body>
right now I'm outputing like this:
$(".output").text(string);
Take a look at code tag in html. Show your string wrapped by code tags
<code>your string</code>
Or use text area. https://jsfiddle.net/sureshatta/k1atgn6o/1/
If you are trying to achived the formatted output please have a look at Template literals
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
.text() use for Change the Text of any Tag.
$(".output").text(string);
.html() is use for Add the String with the Tag.
$(".output").html(string);
If you want to display code that is correctly indented and colorized, you can use a library to do that, such as highlighjs.
I'm not sure it does auto indentation, but the algorithm for that isn't that hard: just add newline and enough spaces when opening a new html tag (recursion will make this way easier).
Also, you can use js-beautify.
I have created a directive in angularJS as <print-note print-data='printData' id='notePrintDiv'></print-note> this directive will take some object and create a formatted html for printing, but I don't want to show the formatted html in my main html I want the formatted html for printout. so I was hopping if there is any way in angularJS where in I just create the element and pass the scope object to it like angular.element("<print-note print-data='printData' id='notePrintDiv'></print-note>"); or any other way and get its innerHTML.
P.S. I can also achieve the same with making outer html of directive template as display: none but that seems to be a bit hacky way.
The $compile service should be able to do this. Inject it in your controller where you have access to the scope (with printData).
var element = $compile('<print-note print-data="printData" id="notePrintDiv"></print-note>')($scope);
I had to achieve samething in a AngularJS app - I kept the directive for Print-Button and I kept id for the div or HTML block that was targeted to be printed and kept that div/html ng-show=false. I think it's one of the right way to get the required task done.
I am using Javascript to define a button behaviour on a web page. The behaviour I am after is to insert some new HTML somewhere on my page, but I would like to use the MVC extension method Html.EditorFor to define the new HTML which will be inserted.
What I would like to do is the following:
$("#myButton").click(function() {
$("#(Html.EditorFor(x => x.SomeModelProperty))").insertBefore(<somewhere>);
});
The problem I'm encountering is that the MvcHtmlString returned by the call to EditorFor renders as multi-line HTML, resulting in invalid Javascript:
$("<div>
<label for="ModelData_SomeModelProperty">SomeModelProperty</label>
</div>
<div> ....
In an ideal world, I could get EditorFor to somehow render all of the above on a single line, or use some kind of special Javascript syntax to define a multi-line string (like using single quotes in C#), but so far I'm drawing a blank.
I've tried calling ToHtmlString and hand-editing the resulting string to remove line-breaks, and I'm aware that I can escape the new lines in Javascript using a /, but the problem with doing so is that I then have to handle the escaped HTML, which looks a little like the following:
$("<div>
<label for="ModelData_SomeModelProperty">SomeModelProperty</label>
</div>
<div> .... (you get the idea)
I was just wondering whether anyone had tried anything similar and might have a more elegant approach?
One way would be to get it written into a hidden div in html instead of directly into the javascript. Then you can just read it from the dom to use in you script.
So you page would have a
<div style="display:none" id="hiddenArea">
...insert whatever you want in here
with newline or whatever...
</div>
And then in your javascript:
$("#myButton").click(function() {
var source = $("#hiddenArea").html();
$(source).insertBefore(<somewhere>);
});
You could maybe create a HTML helper so you much more control on what's returned and how it is formatted.
http://www.codeproject.com/Tips/720515/Custom-HTML-Helper-for-MVC-Application