CODEWITHSUNDEEP
angularjsng-bind
EmmyS
EmmyS

Reputation: 12138

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

Upvotes: 0

Views: 542

Answers (2)

EmmyS
EmmyS

Reputation: 12138

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>

Upvotes: 0

charlietfl
charlietfl

Reputation: 171669

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>

Upvotes: 2

Related Questions