Nested AngularJS ng-bind

Question

I have an error modal that displays a message if an $http post returns a certain status. I now need to be able to add an error code to the display. The customer wants it to be on the same line as the message, but styled differently (small font), so I tried this:

<p class="text-center" data-ng-bind-html="message">
   <span data-ng-if="errCode" class="small" data-ng-bind="' code ' + (errCode)"></span>
</p>

The data being passed into my template looks like this:

{title: "Login Error", message: "Server Response Error", errCode: 106, button: "OK"}

What they want is something like this:

Server Response Error code 106

with the "code 106" being a smaller font (sorry, can't figure out how to change span styles in markdown.) But with the code above, the span is being overwritten by the message binding in the outer paragraph tag. How can I use nested ng-bind elements? (Concatenating the values before passing them in as a single variable is not an option.)

your <p> content is html-binded with message. isn't the <span> being replaced? — celerno
– celerno, Commented Sep 27, 2016 at 21:52

charlietfl · Accepted Answer · 2016-09-27 21:53:58Z

2

You need to use inline elements as siblings to do this. ng-bind-html replaces innerHTML

<p class="text-center">
   <span  data-ng-bind-html="message"></span>
   <span data-ng-if="errCode" class="small" data-ng-bind="' code ' + (errCode)"></span>
</p>

answered Sep 27, 2016 at 21:53

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

1 Comment

EmmyS Over a year ago

Thanks. You posted just as I had figured out my answer. I'm new to angular - can you tell me if there are any advantages or disadvantages to doing it your way vs. the answer I posted?

EmmyS · Accepted Answer · 2016-09-27 21:54:08Z

0

The answer was to not use ng-bind for the variables. This works:

<p class="text-center">{{message}}<span data-ng-if="errCode" class="small"> code {{errCode}}</span></p>

answered Sep 27, 2016 at 21:54

EmmyS

12.2k49 gold badges104 silver badges161 bronze badges

8 Comments

charlietfl Over a year ago

{{}} is not a valid replacement for ng-bind-html

EmmyS Over a year ago

See comment on your post... can you explain why? It works in this case - is there some obvious way you can see it breaking at some point?

charlietfl Over a year ago

yes .. {{}} only works for text ... not html. So either you didn't need ng-bind-html because the data is only text or you have to add an element to insert the ng-bind-html content into

EmmyS Over a year ago

Yes, but the variables that are being "bound" are just plain text.

charlietfl Over a year ago

ok..well then ng-bind-html wasn't correct directive then. It was easy to assume you had different types since you used different directives

|

Collectives™ on Stack Overflow

Nested AngularJS ng-bind

Server Response Error code 106

2 Answers 2

1 Comment

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Server Response Error code 106

2 Answers 2

1 Comment

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related