Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ng-bind-html with translate

See original GitHub issue

I’m fairly certain I’ve injected the correct dependencies for this, but I’m getting this error…

http://docs.angularjs.org/error/$interpolate/interr?p0={{errorMessage | translate}}&p1=TypeError: Cannot call method 'trim' of undefined

for this code in my template…

<div id="warning" ng-show="warningMessage!=''" class="alert alert-warning alert-animation">
    <i class="fa fa-asterisk"></i>&nbsp;<span ng-bind-html="{{warningMessage | translate}}"></span>
    <button type="button" ng-click="warningMessage=''" class="close"><i class="fa fa-times"></i></button>
</div>

and the resulting html looks like this…

<div id="warning" ng-show="warningMessage!=''" class="alert alert-warning alert-animation" style="">
     <i class="fa fa-asterisk"></i>&nbsp;<span class="ng-binding" ng-bind-html="Your profile is currently not published.  &lt;a href=''&gt;Edit Your Profile&lt;/a&gt;"></span>
    <button type="button" ng-click="warningMessage=''" class="close"><i class="fa fa-times"></i></button>
</div>

Issue Analytics

State:
Created 10 years ago
Comments:7 (2 by maintainers)

Top GitHub Comments

6reactions

emaddcommented, Feb 26, 2014

Yes. It was syntax.

<span ng-bind-html="warningMessage | translate"></span>

worked

3reactions

thiagog3commented, Jun 1, 2016

@kevinchevallier I think it could help you:

ng-bind=“((variable1 || variable2) | translate)”

Top Results From Across the Web

AngularJS: translate and multiple ng-bind-html values

In my app I try to concat two strings: email and some text. But I have a trouble, I need text part translateable...

ngBindHtml - AngularJS: API

Evaluates the expression and inserts the resulting HTML into the element in a secure way. By default, the resulting HTML content will be...

AngularJS ng-bind-html Directive - W3Schools

The ng-bind-html directive is a secure way of binding content to an HTML element. When you are letting AngularJS write HTML in your...

angular-translate 2.10 with angular v1.5 - CodePen

bind-html translate: <strong ng-bind-html="'Q' | translate: {q: ... script tag is stripped during translation, non-ASCII characters are garbled</small><br>.

angular-translate features - Plunker

var translations = { HELLO_WORLD: 'Hello world! ... translate-values="{ value: 'Angular Translate'}"></p> <p data-ng-bind-html="textBold | translate ...