Should I use a single object or individual values ​​as attributes in the Angular directive?

Question

This is a kind of “best practice” question, but I still think there might be a right answer.

I have a directive with six customizable parameters. Should I configure six different attributes in a directive (like below):

<my-directive my-width="300" my-height="300" my-status="true" my-foo="yes" my-bar="no"> </my-directive> 

or, should I pass the configuration object into a single attribute (e.g. below):

 <my-directive my-options="options"></my-directive> 

Is this just a preference or is there a generally preferred method? Any feedback is welcome. Thanks:)

Answer 1

This is basically a matter of preference. Since you can achieve the end result using both routes. I personally prefer to see individual attributes, as suggested in the first example, to work with detailed, expressive elements.

Just by looking at <my-directive my-width="300" my-height....> in your first example, I can make an educated guess about what this directive is used for, and can easily combine what happens. Just seeing my-options="options" , I would have no idea if I hadn't broken through some code to understand the intent of this element.

As one project developer, however, this may be a low priority priority - often written as “okay, what's the difference?”, But since you introduce other members working on the same code base, having verbosity can make the fight easier to understand your intentions, especially for developers who are not familiar with AngularJS.

As for the technical benefits, let's say, for example, you want to apply a style rule only to elements whose attributes include my-foo . This becomes trivial with css selectors with the following

 [my-foo="yes"] { background-color: dodgerblue; } [my-foo="no"] { background-color: tomato; } 

Another quick example - let's say you have jQuery in your project and you want to do something like

 $("[my-bar='no']") // do whatever 

Performing these tasks, another route can be difficult. Consider this example with a real word: the UX designer wants to use these manipulations, but, say, he is not very versed in AngularJS - these tasks become unnecessarily painful.

When you start looking at aspects and examples like these, managing granular on your elements becomes invaluable. To your initial interest in asking this question, of course, everyone can understand the desire to consolidate this into something concise, like my-options="options" , but the desire to reduce code is not always beneficial.

All considered, a combination of both options is probably ideal depending on the perceived importance of the attribute you are working with. height , width , status ? - probably important enough and understandable enough for autonomous. A complex statistical object with many fields used in processing directives? - Most likely, will remain an object.