I want the user to see double curly braces, but Angular binds them automatically. This is the opposite case of this question where they want to not see curly braces used for binding when the page is loading.
I want the user to see this:
My name is {{person.name}}.
But Angular replaces {{person.name}} with the value. I thought this might work, but angular still replaces it with the value:
{{person.name}}
Plunker: http://plnkr.co/edit/XBJjr6uR1rMAg3Ng7DiJ
<code ng-non-bindable>{{person.name}}</code>
Documentation # ngNonBindable
Edit: adding \ slash between brackets inside the quotes works
{{ "{{ person.name }\}" }}
this too .. by passes angular interpreting
{{ person.name }<!---->}
this too ..
{{ person.name }<x>}
{{ person.name }<!>}
In our case we wanted to present curly brackets in a placeholder, so they needed to appear inside an HTML attribute. We used this:
<input placeholder="{{ 'Hello {' + '{person.name}' + '}!' }}" ...>
As you can see, we are building up a string from three smaller strings, in order to keep the curly braces separated.
'Hello {' + '{person.name}' + '}!'
This avoids using ng-non-bindable so we can continue to use ng- attributes elsewhere on the element.
Updated for Angular 9
Use ngNonBindable to escape interpolation binding.
<div ngNonBindable>
My name is {{person.name}}
</div>
Use ng-non-bindable in container, this is effective on all element inside here container.
<div ng-non-bindable>
<span>{{person.name}}</span>
<img src="#" alt="{{person.name}}">
<input placeholder="{{person.name}}">
</div>
<span>{{</span>{{variable.name}}<span>}}</span>
I wanted single brackets across text and the above solutions didn't work for me. So did want the Angular recommended.
Angular Version: 5
Required Text: My name is {person.name}.
<span>My name is {{'{'}}person.name{{'}'}}.</span>
I hope it helps someone.
From Angular compiler:
Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.)
So in the original question - you would end up with:
My name is {{ '{' }}{{ '{' }}person.name{{ '}' }}{{ '}' }}
Related
I can pass a string value to javascript function onblur when using plain html tag as shown below:
<input type="password" name="l_password" onblur="passwordValidation(this,'id_lpassword_error')" />
but when i try to do the same thing for render_field tags it doesnt work. i get error TemplateSyntaxError: Could not parse the remainder
{%render_field form.password onblur="passwordValidation(this,'id_lpassword_error')" %}
how can i pass the string 'id_lpassword_error' to a javascript function from the render_field tag in Django?
render_field is doing its own custom parsing of that tag, and it looks like it treats double quotes and single quotes the same. So it is probably looking for the tag to finish after your first single quote.
It looks like using the filter attr should work, since it is using Django's built-in template tag parsing system, which almost definitely can deal with different types of quotes properly.
So, if I'm understanding this right, something like:
{{form.password|attr:"onblur:passwordValidation(this,'id_lpassword_error')" }}
Let us know if that works.
I would imagine that all of these would work.
But only 4 work. The others produce "missing )" errors.
All the "code checkers" I've run them through, claim "no errors at all". None of the string literals contain any single or double quotes at all.
What is the secret way to escape ALL text to avoid ALL errors.
<div onclick='alert("Bob's" );'> 1 works </div>
<div onclick="alert('Fred's' );"> 2 fails </div>
<div onclick='alert("Say " hi "");'> 3 fails </div>
<div onclick="alert('Say " hi "');"> 4 works </div>
<div onclick='alert("Bob's" );'> 5 works </div>
<div onclick="alert('Bob's' );"> 6 fails </div>
<div onclick='alert("Say " hi "" );'> 7 fails </div>
<div onclick="alert('Say " hi "' );"> 8 works </div>
The HTML entities are translated to their corresponding characters before passing the string to Javascript. They only escape the characters at the HTML level, not the Javascript level.
So the second one tries to execute the Javascript:
alert('Fred's');
which has improperly nested quotes. You need to include the Javascript escape sequence to protect the quote:
<div onclick="alert('Fred\'s' );">
This will execute Javascript:
alert('Fred\'s');
which is valid.
If you're looking for a general way to generate code that will always be escaped properly, without having to parse it in detail, I don't think there is one. The best solution is not to put Javascript into HTML attributes in the first place, but us unobtrusive Javascript.
<div id="fredalert">
<script>
document.querySelector("#fredalert").addEventListener("click", function() {
alert('Fred\'s');
});
</script>
", ', " and ' are not part of JavaScript. HTML parser will convert them if it encounters them inside HTML; so your code effectively reads:
alert("Bob's" );
alert('Fred's' );
alert("Say " hi "" );
alert('Say " hi "' );
alert("Bob's" );
alert('Bob's' );
alert("Say " hi "" );
alert('Say " hi "' );
which works, or fails, for the predictable reasons.
As comments started saying, it is best not to mix JavaScript and HTML; use external script, and attach things to DOM dynamically (for example, with document.addEventListener). If you absolutely need to have JavaScript inside a HTML attribute (though I've never encountered such a need, nor can I imagine why I would), you can escape the quotes using the backslash, like you normally would:
alert('Bob\'s');
EDIT: If you already have code that needs to be fixed, the easiest way to do that is to ensure that JavaScript is correct; then if such JavaScript is to be placed inside a HTML attribute, to convert the quotes that match the quotes of the attribute into entities. (It won't hurt though if you go overboard and just convert both kinds of quotes.) So, let's say you want to alert "Hi", said Bob's uncle. To make this into a string, you would need to backslash-escape at least one of those quotes (or use template literals). So you get "\"Hi\", said Bob's uncle" as a valid JS string. Then if you're going to place it inside onclick="", you make double quotes (or all quotes) into entities (which you can do , for this final result:
onclick=""\"Hi\", said Bob's uncle""
This is a process that is fairly easy to automate, and will leave you with correct JavaScript, assuming you started with correct JavaScript in the first place.
I am working on application with java as backend and Angularjs 1.0 for Front end. I am using veasy Angularjs plugin to show datatable. Now I have managed and tweaked veasy plugin to customize a lot for my app.
Now I am stuck on silly thing, I know how to escape an quote by prefixing "\". But problem here is as I am using multiple hierarchy of quotes both single and double and I am not able to add another quote without breaking the HTML.
Flow of the code:
That is a Json that will pass to veasy table. one of the key in that JSON will have HTMl as its value, I have already compiled it in Angularjs, & Its working.
code has a div with bootstrap popover on focus and it also has an attribute that contains html for that popover, now html content has many li for which I need to add ng-click (to each li) with function that passes string value
what I need is to pass a value (string) with that function (changevehicle()) but I am not able to add quotes in it, as soon I add a quote there, HTML is broken.
I have tried doing this and a lot: changevehicle(\'string\'), I have tried with single quotes double quotes with and without esaping.
I guess my question is not clear. the below code is working, but when I add string value to that function as an argument (changevehicle()), HTML is broken.
{[vehicle : "<div class='curp use-ellipsis' data-trigger='focus' tabindex='0' role='button' jobplanningpopover popover-html4='<ul class=\"list-unstyled\"><li class=\"emph curp\" ng-click=\" changevehicle() \">xxxxxY 2P<\/li><li class=\"curp\">CHIILL 6P<\/li><li class=\"curp\">NKL 235<\/li><li class=\"curp\">KHD 654<\/li><li class=\"curp\">YET 874<\/li><\/ul>' popover-placement4='bottom' > {{ xxxxxvehicle }} <\/div>"]}
Using " in the place of escaped quotes should do the trick. HTML recognizes this as an escaped quotation mark.
"<div class='curp use-ellipsis' data-trigger='focus' tabindex='0' role='button' jobplanningpopover popover-html4='<ul class="list-unstyled""><li class="emph curp" ng-click=" changevehicle() ">xxxxxY 2P<\/li><li class="curp$quot;>CHIILL 6P<\/li><li class="curp">NKL 235<\/li><li class="curp">KHD 654<\/li><li class="curp">YET 874<\/li><\/ul>' popover-placement4='bottom' > {{ xxxxxvehicle }} <\/div>"]
sometime you just need fresh eyes for a problem , today I solved it in just few minutes
below code worked for me
{[vehicle : "<div class='curp use-ellipsis' data-trigger='focus' tabindex='0' role='button' jobplanningpopover popover-html4='<ul class=\"list-unstyled\"><li class=\"emph curp\" ng-click=\" changevehicle("+"'_string_'"+") \">xxxxxY 2P<\/li><li class=\"curp\">CHIILL 6P<\/li><li class=\"curp\">NKL 235<\/li><li class=\"curp\">KHD 654<\/li><li class=\"curp\">YET 874<\/li><\/ul>' popover-placement4='bottom' > {{ xxxxxvehicle }} <\/div>"]}
I'm trying to convert a description, which is a string from my database, into HTML. I'm getting the description with {{ projet.description }}, but it seems that in JavaScript, "description" causes a bug in my script... So I create a div with my description on it, make it invisible, and get it with innerHTML.
Twig code
<div id="desc">{{ projet.description }}</div>
<div>
<script type="text/javascript">
var desc = document.getElementById("desc").innerHTML|e('js')|raw;
document.write(desc);
</script>
</div>
CSS
#descr {
display:none;
}
But now, document.write() still returns a string like "<p><em>POKEMON</em></p>". However, I want it in HTML.
I'm almost sure that HTML was escaped, so try it out:
<div id="desc">{{ projet.description|raw }}</div>
See raw filter on twig docs: raw
The raw filter marks the value as being "safe", which means that in an
environment with automatic escaping enabled this variable will not be
escaped if raw is the last filter applied to it
Also:
var desc = document.getElementById("desc").innerHTML|e('js')|raw;
The above snippet is not valid on twig because it isn't surrounded by valid delimiters such as "{{ }}" or "{% %}".
How do I include a newline in an HTML tag attribute?
For example:
<a href="somepage.html" onclick="javascript: foo('This is a multiline string.
This is the part after the newline.')">some link</a>
Edit: Sorry, bad example, what if the tag happened to not be in javascript, say:
<sometag someattr="This is a multiline string.
This is the part after the newline." />
Edit 2: Turns out the newline in the string wasn't my problem, it was the javascript function I was calling. FWIW, "
" can be used for newline in an HTML attribute.
From what I remember about the HTML standard, character entities work in attributes, so this might work:
<sometag someattr="This is a multiline string.
This is the part after the newline." />
I'm not sure if the "newline" you want ought to be
(\n) or
(\r\n), and I'm not sure if browsers will interpret it the way you want.
Why do you need it? What specific problem are you trying to solve by adding a newline in an HTML tag attribute?
To include a multiline value, just continue the text of the html attribute on the next line in your editor e.g.
<input type="submit" value="hallo
hallo">
will put the second hallo under the first
As a general rule newlines in attributes are preserved so your second example would work fine. Did you try it? Can you give a specific example where you are having problems with it?
As test take a look at this:-
<a href="somepage3.html" onclick="javascript: alert(this.getAttribute('thing'))" thing="This is a multiline string.
This is the part after the newline.">some link</a>
The alert include the newline in the attribute.
<a href="somepage.html" onclick="javascript: foo('This is a multiline string. \
This is the part after the newline.')">some link</a>
Javascript needs a backslash at the end of the new line in a string.
i'm not certain, but you can try \r or \n
javascript: foo('This is a multiline string.\rThis is the part after the newline.')
or
javascript: foo('This is a multiline string.\nThis is the part after the newline.')
Usually, line breaks in HTML source code display what you intended in the result.
(Depends on the editor of course)
Since it's in Javascript, you would use "\n" if inside double-quotes (not positive about single-quotes, I've been in PHP a lot lately.
Honestly, it's worth mentioning that you should use Events and a delegator instead of placing a javascript event directly on the element.