CODEWITHSUNDEEP
angularjs
Ali
Ali

Reputation: 10463

How to re-render string with variable in Angularjs

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).

Upvotes: 1

Views: 3150

Answers (3)

Poyraz Yilmaz
Poyraz Yilmaz

Reputation: 5857

<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

Upvotes: 1

Tules
Tules

Reputation: 4915

Try this

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

Upvotes: 1

caffeinated.tech
caffeinated.tech

Reputation: 6548

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

Upvotes: 2

Related Questions