Difference between isolate scope variables and attr for angularjs directives?

Question

Given:

 scope:{
      suit: '@',
      value: '@'
    },

I can access these values in my directive template with {{suit}} or {{value}} I can also access them in my link function with attr.suit or attr.value.

What happens when I declare class = "{{suit}} {{value}}" in the template and also do elem.addClass(attr.suit) and elem.addClass(attr.value) at the same time?

It seems that the {{}} value takes precedence and overrides what I do in the link function. Can anyone explain why that is? Also, what is the better practice?

Put them in scope if needed by the directive template, and if the view does not need them then use attr. — aet
– aet, Commented May 1, 2014 at 21:51

haimlit · Accepted Answer · 2014-05-01 21:51:01Z

1

At least one consideration is if you expect the values to change in the same directve. Can 'suit' value can be x, and later be changed to y?

If you expect the 'suit' or 'values' to change, considering you're not manipulating them, I'd use them in the template.

ng-class="{{suit}} {{value}}"

(ng-class has better support for interpolations)

If you don't expect 'suit' or 'values' to change, you can remove them as an isolated scope variables since it defines a binding that you don't need, and use elem.addClass(yourAttribute) as you've already written.

answered May 1, 2014 at 21:51

haimlit

2,6022 gold badges24 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Difference between isolate scope variables and attr for angularjs directives?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related