Angular template variable replace markup on the fly - angularjs

I am working on a heavy dataset.
so I am placing a nested variable inside a table
{{entry.text}}
but this can have several names like
Clare Butterfield /n/r Barry Burton
--
really I want to replace the carriage returns with a br tag
so each name goes on another line
{{(entry.text).replace("/n", "<br>")}}

You'll need two pieces to complete this:
1) A filter that will take in the text and replace /n with <br/>, and
2) The ng-bind-html directive to get angular to use that <br/> instead of just displaying Clare Butterfield <br/> Barry Burton
in the end your html will look something like this:
<span ng-bind-html="::entry.text | newLineFilter"/>
For an example of a similar filter to what you need, see this SO question here:
Angular filter to replace all underscores to spaces
For the ngBindHTML directive, see here:
https://docs.angularjs.org/api/ng/directive/ngBindHtml
any questions?
p.s. since your data-set is large you may notice that I added 2 colons in the example above to indicate that it's using one-time binding. This will prevent angular from recalculating the value too often and save on performance. Those aren't strictly necessary, so if you find your text is not updating when you expect it to, just remove them.

Related

Angular splits ng-models on '_' and creates array. Why? And how do I stop it?

I have a HTML form with a bunch of inputs named geometrie_1_bezeichnung, geometrie_1_stack, geometrie_2_bezeichnung, geometrie_2_stack and so forth.
ng-model of these fields is created dynamically like product.geometrie_2_bezeichnung.
$scope.submitSave = function(product){ console.debug(product) }
Angular splits these values and creates arrays like geometrie[][bezeichnung] and adds these to my productobject.
My CMS in the background doesn't like this. I want/need only the raw values. Is there any way to stop Angular from doing this? (This might be Angular 1.4 behaviour, not sure though)
Thanks,
thomas
Would be good to see your Code.
But to be sure... geometrie_1_bezeichnung is made to geometrie[][bezeichnung]?
Did you try to remove the underscores from the input names?

Confusion rendering unescaped HTML and newlines

I have a forum like site, where people should be able to add strings like:
<<<<<
>.<
etc.
Also I want to preserve the new lines. Besides I replace many newlines in the server with 1.
For first feature I found the solution is to use ng-bind-html="myText"
that works.
But I have a problem with the newlines, not matter what I do, they are not displayed.
If I don't do anything (also no replacements in the server), they are rendered as newlines in the source and not displayed.
If I replace them with <br> or <br/> before rendering, they show as source -> <br> or <br/>.
If I don't use ng-bind-html anymore, and render the text as normal expression, I get escaped html: <br> (besides, in this case, the strings mentioned first also don't work).
What do I have to do? Thanks in advance!
It's more of a CSS issue. Use: white-space: pre;.

Sublime Text 2: Different language highlighting based on context? (a la Webstorm)

I was watching some videos on Egghead.io about AngularJS. The creator of the videos uses Webstorm (and, I believe, works for them). One feature I noticed is that he can set different syntax highlighting within different scopes or quotation marks. So, in code like the following (from an AngularJS directive)
return {
template: '<div>something</div>',
// ^^^ these guys ^^^
}
...he can get the inside of the quotation marks to highlight as HTML.
I use Sublime Text 2, and am fairly wedded to it. Is there an existing feature/plugin for Sublime that could handle a case like this? If not, is something like this technically possible using the Sublime Text 2 API?
I don't think it's built in, but it's certainly possible. I've been doing some work with graphviz and wanted to do something similar. Labels can be generated with html like syntax. Anyways, I played around with the .tmLanguage file and added a new pattern to match the context where html like entries were valid (I look for label = <). The patterns I used for the captures aren't that good, but it works for fine for me. This give me the following, which I think is similar to what you are looking for.
I don't know anything about AngularJS, so I can't help you with anything specific to that, but it is certainly possible. Note that in the image below, the last <table></table> are just to show that highlighting doesn't occur there.
Edit:
Forgot to include this in the original post, but here is my updated tmLangauage file. That first pattern is what I added(link). I used PlistJsonConverter to go from JSON to plist, then saved the file as .tmLanguage. Hope this helps.
#skuroda is right, I implemented #skuroda's code with an additional plugin to easily edit HTML within an AngularJS directive JS file. The result is HTML syntax highlighting within a directive JS file and additional functionality to remove string related delimiters while editing templates.... Sublime AngularJS HTML Template Plugin

with HTMLpurifier, how to add a couple attributes to the default whitelist, e.g. 'onclick'

Two questions:
I have been reading docs and SO posts.. and know how to do it the long way (defining each and every element and attribute myself), but all I want to do is add 2 or 3 attributes to the default whitelist.. so that I do not have to constantly find and add more elements/attributes to, e.g., HTML.AllowedElements and/or HTML.AllowedAttributes.
Specifically, now, (for internal trusted users) I need to allow javascript attributes (input from tinymce). Question #1.) Is there a way to just add an attribute (to what HTMLpurifier allows) without causing the whole default sets of allowed elements/attributes to be effectively wiped out (overwritten by ONLY what is explicitly written in HTML.AllowedElements or HTML.AllowedAttributes)?
For what I need right now (the javascript attributes), I got excited when I saw in this thread:
Whitelist Forms in HTML Purifier Configuration
...where Edward Z. Yang says, "... [$config->set('HTML.Trusted', true);] allows JavaScript."
...but even after setting this: $config->set('HTML.Trusted', true);, HTMLpurifier 4.4.0 is still stripping e.g. any input onclick="dostuff();" attribute. Why? Question #2.) Is there a quick way to add just the javascript attributes to the allowed list?
You're losing onclick because HTML Purifier doesn't know about that attribute, and if HTML Purifier passed everything through when you turned on %HTML.Trusted you might as well just not use HTML Purifier at all.
HTML Purifier has attribute collections for just this case; 'Common' is probably the right one to insert them into.
But... why? The real name of %HTML.Trusted really should be %HTML.UnsafeMakeMyApplicationVulnerable
HTMLPurifier does not support onClick and similar java script related attributes to any HTML element as a default behaviour.So if you wish to allow such attribute any way, you may add such attribute to specific element in following way.
$config = HTMLPurifier_Config::createDefault();
$def = $config->maybeGetRawHTMLDefinition()
$def->addAttribute('a', 'onclick', 'Text');
But be careful, this may lead to xss attack as you are allowing any java script code to be there in that attribute.

Why are Paragraph spaces being omitted

I have a form which accepts varchar2(5000). It is basically a description field. Now when users enter spces after paragraphs, they are all combined into on paragraph, and not multiple as it is entered.
Why? Ex - This is one paragraph.
This is another paragraph.
Here is what is happening -
This is one paragraph.This is another paragraph.
Are you displaying this data on a webpage or via HTML in some way? If so, then white-space is not handled in a straightforward fashion and that might be causing confusion.
Update - it appears that this is being displayed on a webpage.
You need to do one of several things:
Display your text inside a <pre> element on your page
OR
Replace carriage returns in your text with <br/> chars before sending to the webpage
(You might also need to do something with spaces too, if you need to have multiple of them displayed accurately).
This is nothing to do with databases and only to do with how HTML is displayed.
Have a look at this answer Rendering Plaintext as HTML maintaining whitespace – without <pre>

Resources