EmmyS EmmyS - 1 year ago 113
AngularJS Question

Nested AngularJS ng-bind

I have an error modal that displays a message if an

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>

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
binding in the outer paragraph tag. How can I use nested
elements? (Concatenating the values before passing them in as a single variable is not an option.)

Answer Source

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>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download