CODEWITHSUNDEEP
javascripttwitter-bootstrapangularjs
Nomz
Nomz

Reputation: 151

Angular expression in attribute

I have a page using angular where im implementing popover from bootstrap:

<img class="state-msg" data-toggle="popover" ng-popover data-content="{{item.status.message}}" data-trigger="hover" data-placement="top" ng-src="{{item.status.stateIcon}}"/>

The data-content doesnt get rendered correctly. It returns literaly {{item.status.message}} instead of the value of message.

Does angular have an issue w expressions in 'data-' attributes?

Tnx

Upvotes: 6

Views: 12293

Answers (2)

zs2020
zs2020

Reputation: 54524

Remove the interpolation notation like this. With {{, }}, AngularJS does string interpolation rather than model binding.

data-content="item.status.message"

Upvotes: 3

augustoht
augustoht

Reputation: 121

You can try this out:

ng-attr-src="{{item.status.stateIcon}}"

From documentation:

"If an attribute with a binding is prefixed with ngAttr prefix (denormalized prefix: 'ng-attr-', 'ng:attr-') then during the compilation the prefix will be removed and the binding will be applied to an unprefixed attribute. This allows binding to attributes that would otherwise be eagerly processed by browsers in their uncompiled form (e.g. img[src] or svg's circle[cx] attributes)."

Upvotes: 11

Related Questions