Injecting "ng-click" in HTML with ngSanitize

Question

I'm working on localization with Angular and I'm stuck with one last thing here.

I have this json blob

 { "key": "_need_to_login_", "value": "You need to <a ng-click=\"login()\">log in</a> to add an event.", "description": "Banner alert info tell user to login before they can add an event" }

So with this Angular i18n module I will be able to do this

{{ "_need_to_login_" | i18n }}

The problem is that it contains some markup in there and it will simple escape it and will display this on the page

You need to <a ng-click="login()">log in</a> to add an event.

But with ngSanitize I'm able to unescape that markup and display it correctly as:

You need to log in to add an event.

But I don't have that ng-click inserted as well.

Try copy that and test it here : http://docs.angularjs.org/api/ngSanitize/service/$sanitize

My question is that how can I insert ng-click from the injected code as well as unescape the string?

Think you need to look at $compile though it's not entirely clear to me what you're asking, could you maybe simplify or show a simpler example in plunkr or jsfiddle? — shaunhusain
– shaunhusain, Commented Mar 11, 2014 at 21:31
@shaunhusain this is a simple example of what I'm trying to do jsfiddle.net/942RA/80 — Ali
– Ali, Commented Mar 11, 2014 at 22:19

Alex C · Accepted Answer · 2014-03-11 23:29:46Z

1

ng-bind-html should do what you want. Let me know how it works out, we are planning to add translation support soon to our app.

http://docs.angularjs.org/api/ng/directive/ngBindHtml

Edit2: nevermind about the jsfiddle edit. It didnt work.

edited Mar 11, 2014 at 23:29

answered Mar 11, 2014 at 23:09

Alex C

1,3452 gold badges19 silver badges41 bronze badges

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

6 Comments

Ali Over a year ago

Hi @alexc - It doesn't work the way I expected it to be. Please see example here jsfiddle.net/942RA/80

Ali Over a year ago

So basically if my string contain "ng-click" in the variable and trying to add that to the element only ng-click is not being added.

Ali Over a year ago

data-ng-click is what I needed! Thanks!

Alex C Over a year ago

@Ali, did it work? I am having trouble to reproduce it on jsfiddle

Ali Over a year ago

It's working now @alexc by taking it off from the markup and put data-ng-click in the element itself :)

|

Collectives™ on Stack Overflow

Injecting "ng-click" in HTML with ngSanitize

1 Answer 1

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Linked

Related