EmmyS EmmyS - 2 months ago 24
AngularJS Question

Nested AngularJS ng-bind

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.)

Answer

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>
Comments