According to the Directives documentation, there are two ways to inherit scope:
Using @ or @attr: This binds a local scope property to the value of a DOM attribute. The result is always a string because DOM attributes are strings. If no attribute name is specified, then it is assumed to be the same as the local name. For example, if we have a widget scope definition of { localName:'@myAttr' }, then the localName property on the widget scope will reflect the interpolated value of hello {{name}}. It reads the name from the parent scope (not component scope).
Using = or =attr: This sets up bi-directional binding between a local scope property and the parent scope property defined via the value of the attr attribute. If no attribute name is specified, it is assumed to be the same as the local name. For example, with a widget scope definition of { localModel:'=myAttr' }, the localModel property on the widget scope will reflect the value of parentModel on the parent scope. Any changes to parentModel will be reflected in localModel and vice versa.
If I want to pass an elementId, which is just an id, I can do so using =elementId or @elementId.
Now, which of these methods is considered best practice? Is using "@" and therefore the attribute slower than taking the value directly?
Am I correct in my understanding? Any suggestions?