2

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?

Ali
  • 9,997
  • 20
  • 70
  • 105
  • 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 Mar 11 '14 at 21:31
  • @shaunhusain this is a simple example of what I'm trying to do http://jsfiddle.net/942RA/80/ – Ali Mar 11 '14 at 22:19

1 Answers1

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.

Alex C
  • 1,334
  • 2
  • 18
  • 41
  • Hi @alexc - It doesn't work the way I expected it to be. Please see example here http://jsfiddle.net/942RA/80/ – Ali Mar 11 '14 at 23:20
  • 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 Mar 11 '14 at 23:21
  • `data-ng-click` is what I needed! Thanks! – Ali Mar 11 '14 at 23:32
  • @Ali, did it work? I am having trouble to reproduce it on jsfiddle – Alex C Mar 11 '14 at 23:34
  • It's working now @alexc by taking it off from the markup and put `data-ng-click` in the element itself :) – Ali Mar 11 '14 at 23:38
  • Did you manage to find a solution? I'm running into the same issue at "http://stackoverflow.com/questions/22737927/angular-ng-bind-html-filters-out-ng-click", but using data-ng-click didn't work for me. – Squrler Mar 29 '14 at 23:04