0

As we know it is good to use ng-bind instead of {{expression}} considering performance which is clearly mentioned here

Similar to this, just want to understand how can we bind class attributes or data attributes or any other properties which is not related to html display elements?

Ex: We can bind to span element like: <span ng-bind="vm.bindText"></span>

Where as what if we want to bind for class without any conditions or using ng-class and also directives

Now it looks like this: <span class="{{vm.bindText}}"></span>

And this implementation works for class: <span ng-class="vm.bindText"></span>

But how to do it on custom data attributes like: <input data-id="vm.bindOldId" placeholder="vm.bindText"> instead of <input data-id="{{vm.bindOldId}}" placeholder="{{vm.bindText}}">

Just curious to know about this and does it really makes sense of doing it as well?

Let me know your thoughts on this.

Mithun Shreevatsa
  • 3,588
  • 9
  • 50
  • 95

1 Answers1

1

Can't you use ng-class?

ng-class="vm.bindText"

You can add data attributes like so to:

ng-attr-data-YOUR_ATTRIBUTE="YOUR VALUE"
Sam Willis
  • 4,001
  • 7
  • 40
  • 59
  • Yup, ng-class works. For `data-id`, tried using `ng-attr-data-id="vm.bindText"`, but its just displayed as: `data-id="vm.bindText"` instead of its value – Mithun Shreevatsa Aug 21 '17 at 08:44
  • It will work for: ng-attr-data-id="{{vm.bindText}}", without expression is there a way or what am i doing wrong here? – Mithun Shreevatsa Aug 21 '17 at 08:45
  • If you want to add the value of what `vm.bindText` is, then you will need to evaluate it using braces: `ng-attr-data-id="{{vm.bindText}}`. Without braces you are setting it to the string `vm.bindText` – Sam Willis Aug 21 '17 at 08:54
  • That expression evaluation relies on continues scope life cycle update and impacts in performance rite? How about placeholders ? – Mithun Shreevatsa Aug 21 '17 at 09:23