Angular expression in attribute

Question

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

Answer 1

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

Answer 2

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

data-content="item.status.message"