Nesting quotes in Angular expression

Question

In .js files triple nested quotes ("one'two"three"'") can be escaped (see this post) and in HTML this can also be achieved using character references (see this post). I have a problem achieving this in an AngularJS expression in my template.

I need to put this:

{{ 'PLURAL' | translate:"{ GENDER: 'male' }":"messageformat" }}

Into a placeholder element:

<input placeholder="{{ 'PLURAL' | translate:"{ GENDER: 'male' }":"messageformat" }}">

How should I escape the quotes to make it work?

are you sure your translate filter needs objects wrapped in quotes? Seems very odd — charlietfl, Mar 07 '15 at 19:18

Pankaj Parkar · Accepted Answer · 2015-03-09T11:23:39.113

4

Answer would be put { GENDER: 'male' } in some scope variable then do use that inside your interpolation directive expression, that will simplify your escaping more better.

Markup

<div ng-init="maleFilter = { GENDER: 'male' }">
   <input ng-attr-placeholder="{{ 'PLURAL' | translate: maleFilter : 'messageformat' }}">
<div>

Hope this could help you, Thanks.

edited Mar 09 '15 at 11:23

answered Mar 07 '15 at 19:17

Pankaj Parkar

134,766
23
234
299

Nope, prints the non-interpolated string up onto the first escape like this: {{ 'PLURAL' | translate:\ – Jesse Buitenhuis Mar 07 '15 at 19:21
1

Cool stuff. Not an answer to the problem though. – Jesse Buitenhuis Mar 08 '15 at 09:34
@JesseBuitenhuis could you add some code, so that we can play with it & will help you find out correct answer.. – Pankaj Parkar Mar 08 '15 at 09:35

Jesse Buitenhuis · Answer 2 · 2015-03-08T11:22:23.653

1

For future reference. These Angular Translate docs were confusing to me.

The format that works is:

placeholder="{{ 'PLURAL' | translate:{gender:'male'}:'messageformat' }}"

edited Mar 08 '15 at 11:22

answered Mar 08 '15 at 09:33

Jesse Buitenhuis

670
4
11

did you placed `placeholder` to and scope variable? – Pankaj Parkar Mar 08 '15 at 09:52
1

Sorry - updated my answer so it corresponds to the original question. The `placeholder` in my previous answer was bound to a scope variable. – Jesse Buitenhuis Mar 08 '15 at 11:23
1

it looks like same as that of my second suggestion in answer..only i took `{gender:'male'}` into scope variable – Pankaj Parkar Mar 08 '15 at 11:29
1

But the first version of your answer is incorrect - could you update and I'll mark as anwered. – Jesse Buitenhuis Mar 09 '15 at 11:19

Nesting quotes in Angular expression

2 Answers2