Why AngularJS prints double quotation in HTML - javascript

With AngularJs, I am trying to display currency exchange with image. Here is my Razor code below.
<span ng-controller="CurrencyController">
<span ng-bind="currencies"></span>
</span>
and I am sending the below text from controller
string text = "Dollar : 1.7 <img src=\"~/Images/Currency/up.png\">";
when the HTML is rendered, I took a look at the source in Chrome, and I saw the HTML below...
<span class="ng-binding">
"Dollar: 1.7 <img src="~/Images/Currency/down.png">"
</span>
Why is the rendered text in HTML is surrounded with double quotation? how can I fix this?

You should be using ng-bind-html, as stated in the docs, is the directive used to render html.
ng-bind should only be used if you cant to render a simple html text node.
So, your code should look like this:
<span ng-controller="CurrencyController">
<span ng-bind-html="currencies"></span>
</span>

Related

Multiple Line Ellipsis (clamp) through multi level html tags, which also works on IE, Firefox etc

After hours of research, i finally found a functioning way for having multiple Line Ellipsis (with JS, with plain CSS is not possible). 100 different Google results and Q/As, but currently this is the only one which works (only cause this one works not just on Chrome, but also on IE 11, Firefox etc.):
http://jsfiddle.net/Warspawn/9nz3T/
In my case, the problem in this fiddle is, it assumes that the text which is clamped, is inside a one single html tag (text-clamp ist the angular directive which does the job):
<p text-clamp="1">a normally very long text</p>
In my case, the text i want to clamp is a h1 and it consists of multiple elements:
<h1 text-clamp="1">{{getIntroText()}}
<span> as
<span class="highlight">{{getCount()}}</span>
</span>
<span> in
<span class="highlight">{{getAnotherPart()}}</span>
</span>
</h1>
How can i get the above angular Directive working with my html?
This is my 2. fiddle with my h1 tag:
http://jsfiddle.net/9nqyLxuf/1/
Thanks in advance,
Just use the HTML title tag to display text on hover, and AngularJS limitTo directive will do the trick
<h1 title="{{foo}}"> {{introText | limitTo:9}} as <span>{{text | limitTo:5}}</span> in {{text2 | limitTo:1}}...
Working fiddle

Froala v2 editor mangles my code upon retrieval

I'm using the Froala editor v2 and I'm running into a very frustrating and intermittent problem. I'm embedding a custom HTML widget (a rich preview when the user enters a URL on its own line). But when I retrieve the final HTML to be saved to our database, it seems Froala decides to "clean up" my HTML before giving it to me. When I inspect the editor instance while I'm editing the content, all the markup is in good shape. But when I call $('.froala-editor').froalaEditor('html.get') to retrieve the HTML, the HTML for the URL preview widget is completely mangled.
My suspicion is that, since the entire preview is wrapped in an <a> tag to make the whole thing linked (and I don't have any nested <a> tags in it because that's bad HTML), Froala is taking the other structural elements like the divs, h# tags, p tags, etc and placing copies of the wrapping <a> tag inside all of them (as you'll see in the code samples) because it doesn't think you're allowed to have an <a> wrapping all that stuff. But that's just a guess.
And to top it all off, sometimes Froala will give me the HTML intact and other times it won't.
I don't think it makes any difference, but I'm using React to generate the widget and then injecting the resulting HTML into the editor. I've removed all the data-reactid attributes to reduce the clutter.
Original injected HTML (the outermost <p> tags are there because Froala seems to like to wrap everything in semantic block level tags):
<p>
<a href="http://www.google.com" target="_blank" class="embedly-preview" title="http://www.google.com" data-source-url="http://www.google.com">
<span class="ui media content-item-wrapper content-summary post-body">
<span class="media-left content-summary-image post-image">
<img src="https://res.cloudinary.com/peerlyst/image/fetch/http%3A%2F%2Fwww.google.com%2Fimages%2Fbranding%2Fgooglelogo%2F1x%2Fgooglelogo_white_background_color_272x92dp.png">
</span>
<span class="media-body content-summary-body">
<h2 class="content-summary-title content-title post-title">Google</h2>
<p class="content-summary-content post-content">Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for.</p>
<p class="content-summary-link">http://www.google.com</p>
</span>
</span>
</a>
</p>
What Froala gives me:
<p>
<a class="embedly-preview" data-source-url="http://www.google.com" href="http://www.google.com" target="_blank" title="http://www.google.com">
<span class="ui media content-item-wrapper content-summary post-body">
<span class="media-left content-summary-image post-image">
<img src="https://res.cloudinary.com/peerlyst/image/fetch/http%3A%2F%2Fwww.google.com…randing%2Fgooglelogo%2F1x%2Fgooglelogo_white_background_color_272x92dp.png">
</span>
<span class="media-body content-summary-body"></span>
</span>
</a>
</p>
<h2 class="content-summary-title content-title post-title">
<a class="embedly-preview" data-source-url="http://www.google.com" href="http://www.google.com" target="_blank" title="http://www.google.com">Google</a>
</h2>
<p class="content-summary-content post-content">
<a class="embedly-preview" data-source-url="http://www.google.com" href="http://www.google.com" target="_blank" title="http://www.google.com">Search the world&apos;s information, including webpages, images, videos and more. Google has many special features to help you find exactly what you&apos;re looking for.</a>
</p>
<p class="content-summary-link">
<a class="embedly-preview" data-source-url="http://www.google.com" href="http://www.google.com" target="_blank" title="http://www.google.com">http://www.google.com</a>
</p>
The problem is not the editor, but the HTML structure you have. You have used a H2 tag inside a P tag which browsers do not allow (see https://stackoverflow.com/a/8696078/1806855 for more details) You could check that in a very basic jsFiddle: https://jsfiddle.net/0jLzm2b0/.
Instead it should work just fine if you'd use a DIV tag instead: https://jsfiddle.net/0jLzm2b0/1/. You can see the output is no longer changed.
After digging into the Froala code using a breakpoint to isolate the point at which the HTML gets mangled, turns out it's actually jQuery that's mangling my HTML. Effectively, given the original HTML from above in the variable html:
$(html).html() !== html
What's even more interesting is that (taking the relevant snippet from Froala's code where it wraps the fetched HTML in a div before processing):
$('<div>' + html + '</div>').html() !== $(html).html() !== html
(Clearly, wrapping html in a <div> will make the HTML not equal to the others, but even the HTML inside the <div> that is output is mangled from the original)
So the jQuery constructor is the thing being "helpful" by retooling my HTML for me.

Google Docs Script - paste HTML as colored text

I'm trying to build a Google Docs Add-on that allows you to pasted Code Snippets into Google Docs that look good. Ex:
I've created the add-on, used a Javascript syntax highlighter and I got the code as HTML with inlined styles. For example:
<pre style="background:#fff;color:#000"><?php
<span style="color:#ff7800">class</span> <span style="color:#3b5bb5">CrudController</span> <span style="color:#ff7800">extends</span> <span style="color:#3b5bb5;font-style:italic">Controller</span> {
<span style="color:#ff7800">public</span> $crud <span style="color:#ff7800">=</span> <span style="color:#3b5bb5">array</span>(
<span style="color:#409b1c">"model"</span> <span style="color:#ff7800">=></span> <span style="color:#409b1c">"\App\Models\Entity"</span>,
<span style="color:#409b1c">"entity_name"</span> <span style="color:#ff7800">=></span> <span style="color:#409b1c">"entry"</span>,
<span style="color:#409b1c">"entity_name_plural"</span> <span style="color:#ff7800">=></span> <span style="color:#409b1c">"entries"</span>,
);
<span style="color:#ff7800">public </span><span style="color:#ff7800">function</span> <span style="color:#3b5bb5">__construct</span>()
{
$this<span style="color:#ff7800">-></span>data[<span style="color:#409b1c">'crud'</span>] <span style="color:#ff7800">=</span> $this<span style="color:#ff7800">-></span>crud;
<span style="color:#8c868f">// Check for the right roles to access these pages</span> </pre>
But if use Google Script's addText() method, it will insert it as plain text. Like so:
Is there a way to convert HTML to rich text or something that Google Script will insert as colored, formatted, text?
Note: In Google Docs, copying syntax highlighted code from somewhere (HTML page, DOC file) and pasting it DOES keep colors and some formatting. That's exactly what I want to achieve, from HTML with inline CSS.

AngularJS / CSS-Selectors - Form Validation

Simple question:
Why is it that the summary class can directly be appended to the <span> element but not the ng-classes to the <form> tag?
Is it because the ng-classes are later generated during runtime? What are the guidelines?
CSS:
HTML:
That is not how you use ng-class. Instead do this:
<span class="summary" ng-class="{ 'ng-valid': myForm.$valid, 'ng-invalid': !myForm.$valid }">...</span>
If you want to do it the way you have it do it like this:
<span class="summary {{ myForm.$valid ? 'ng-valid' : 'ng-invalid' }}">...</span>
Next time you need help on stackoverflow, please paste the code instead of images. Would make it a lot easier.

Chrome Extension: Reading text between a tag

I'm new to making Chrome extensions. I'm trying to read text between a class tag, such as:
<div id="AssetThumbnail" class="thumbnail-holder" data-3d-thumbs-enabled data-url="/thumbnail/asset?assetId=111795617&thumbnailFormatId=6912&width=320&height=320" style="width:320px; height:320px;">
<span class="thumbnail-span" **data-3d-url=**"/asset-thumbnail-3d/json?assetId=111795617" data-js-files='http://js.rbxcdn.com/a552a24cb2c7a47ad748fd129a2e9624.js.gzip' ><img class='' src='http://t7.rbxcdn.com/7cfa58047697662d12f33d68b71e5f42' /></span>
<span class="enable-three-dee btn-control btn-control-small"></span>
</div>
I'd like to get the text from data-3d-url=. I have surrounded it with asterisks in my code so you can see what I'm referring to.
Using jQuery you could retrieve an attribute like that with the following snippet.
alert($('.thumbnail-span').attr("data-3d-url"));
You can then change the alert function to set a variable or whatever else you want to use that value for.
Here's a JSFiddle example: http://jsfiddle.net/r1umr3s5/1/

Categories

Resources