How to re-render string with variable in Angularjs

Question

I have some string to inject into the element in Angularjs App, but that string contain some variable in it and it needs to be substitute first before injecting it to the element or somehow with some filter that tells Angular to re-render that element again because we have some variable that is not rendered yet.

var string = "Hi my name is <a href="{{url}}">{{username}}</a>";

Now when I injected that into an HTML I get it like this

https://webmaker.org/%7B%7Blang%7D%7D/privacy

Hi my name is <a href="%7B%7Burl%7D%7D">%7B%7Busername%7D%7D</a>

I believe that this will need to be re-render somehow?

Sorry about missing context.

So this is in myapp.html

<span ng-bind-html="'string' | i18n">

The HTML is output correctly here, but because that string variable contain some variable in it too and it's not being render correctly (Not HTML part that is not render, but the variable).

You need to provide more context in your question. Don't just guess at what you think the solution is while providing minimal information. — Tules
– Tules, Commented Mar 12, 2014 at 19:58
@Tules, The thing is that I'm trying to inject some string from some JS library (i18n library) where I have all the strings in a js file. Now when I load some of the string to inject them in the DOM it will work fine, but only those with variable in it will not being render? — Ali
– Ali, Commented Mar 12, 2014 at 20:00
you should write a custom directive for it because compiled html string bind with ng-bind-html will throw unsafe error... — Poyraz Yilmaz
– Poyraz Yilmaz, Commented Mar 12, 2014 at 20:48

caffeinated.tech · Accepted Answer · 2014-03-12 20:08:39Z

2

You can't use the {{}} in Javascript. Your JS should read

$scope.url = "http://example.com";
$scope.name = "Link name";

And the HTML:

<a href="{{url}}">{{name}}</a>

You should really look over the tutorial to reinforce your Angular knowledge

EDIT:

sorry, now I re read your question and understand. Use ng-html-bind (you need 1.2.x or newer)

eg.

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

Given that string is a $scope variable. See the docs

answered Mar 12, 2014 at 20:08

caffeinated.tech

6,5561 gold badge24 silver badges41 bronze badges

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

3 Comments

Ali Over a year ago

Hi @LcLk, Thank you so much for your answer. I have url and username part of $rootScope and that part it should work no?

Ali Over a year ago

I'm actually using ng-html-bind in there. Let me paste more code in there. Sorry about that.

caffeinated.tech Over a year ago

For rootscope I think its {{$root.url}} etc, but check the docs first, they aren't as bad as they are made out be: docs.angularjs.org/api/ng/service/$rootScope

Poyraz Yilmaz · Accepted Answer · 2014-03-12 21:27:43Z

1

<span ng-bind-html="'string' | i18n">

using ng-bind-html creates a binding that will innerHTML the result of evaluating the expression into the current element in a secure way.

using $scope variable in your string make it unsafe, so you should use $sce.trustAsHtml but this time variables in your string cannot be bind because they will not compiled...

basically you should compile your string in order to bind your variables. Here comes custom directives you can create a directive which can replace with ng-html-bind...

here is my PLUNKER

answered Mar 12, 2014 at 21:27

Poyraz Yilmaz

5,8671 gold badge28 silver badges28 bronze badges

Comments

Tules · Accepted Answer · 2014-03-12 20:33:08Z

1

Try this

var string = 'Hi my name is <a href="' + url + '">' + username + '</a>';

answered Mar 12, 2014 at 20:33

Tules

4,9152 gold badges29 silver badges29 bronze badges

1 Comment

Ali Over a year ago

This will definitely work if that variable was in the same javascript file, but as I have showed you in the PR that this is from another file. :(

Collectives™ on Stack Overflow

How to re-render string with variable in Angularjs

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related