angularjs How to escape “${variable}” in html?

Question

I want to show a string like ${date} to the div element:

<div>please use the ${date} as the substitute tag to the name</div>

the content will be display like:

please use the ${date} as the substitute tag to the name.

but the browser regards the ${date} as a javascript variable, so how to escape the ${date} string within angularjs?

you can check for $sce services. or you can use <code> or <pre> tag instead of <div> — xkeshav
– xkeshav, Commented Mar 29, 2017 at 6:46
As long as you don't change the start and end interpolation tags, you shouldn't have any problems with that string, that not being considered an expression. — Nicolae Olariu
– Nicolae Olariu, Commented Mar 29, 2017 at 6:53
I try the <code> or <pre> tag but it doesn't work.$sce services maybe could solve my problem, but it seems redundant. — Bruce
– Bruce, Commented Mar 29, 2017 at 7:08
@NicolaeOlariu, I use another start and end interpolation tags because I use it with django. — Bruce
– Bruce, Commented Mar 29, 2017 at 7:30

rrd · Accepted Answer · 2017-03-29 06:49:43Z

1

Make a method in your controller to hand the string back to the template:

specialText() {
  return '${date}';
}

Then in your template:

<div>please use the {{vm.specialText()}} as the substitute tag to the name</div>

answered Mar 29, 2017 at 6:49

rrd

5,9873 gold badges32 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

xkeshav · Accepted Answer · 2017-03-29 06:53:52Z

1

in JS add $sce as DI

$scope.stringVar = $sce.trustAsHtml('please use the ${date} as the substitute tag to the name');

in HTML

<div ng-bind-html="stringVar"></div>

answered Mar 29, 2017 at 6:53

xkeshav

54.2k47 gold badges183 silver badges255 bronze badges

Comments

Nik Weiss · Accepted Answer · 2017-03-29 12:10:31Z

1

You could use $ instead of writing $ in your code. It is the HTML representation for the dollar sign, and should prevent that expression from being recognized as a variable.

<div>please use the &#36;{date} as the substitute tag to the name</div>

You can find a full list of these codes at the W3 Character Entity Reference.

answered Mar 29, 2017 at 12:10

Nik Weiss

4227 silver badges19 bronze badges

Comments

Bruce · Accepted Answer · 2017-03-29 07:19:54Z

0

Thanks for all the answers, I have resolve the problem in an elegant way.

I replace the string ${date} with {{"\${date}"}} and it works. It means that the browser regards the "\${date}" as a angularjs expression which is referenced to the constant string value.

By the way, $ is a special character in string, we should add an escape character \ before it.

answered Mar 29, 2017 at 7:19

Bruce

731 silver badge11 bronze badges

Comments

Harshali Talele · Accepted Answer · 2017-03-29 07:20:42Z

0

A light-weight workaround without escape characters: Split your expression and wrap inner part in span, as below.

<div>please use the ${<span>date</span>} as the substitute tag to the name</div>

answered Mar 29, 2017 at 7:20

Harshali Talele

715 bronze badges

Collectives™ on Stack Overflow

angularjs How to escape “${variable}” in html?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related