angular-styleguide icon indicating copy to clipboard operation
angular-styleguide copied to clipboard

Directive input and options naming convention

Open alirezamirian opened this issue 7 years ago • 1 comments

One of the things that I think can be a source of confliction and non-readability in angular 1 is that attributes can be used as both directives (normally behavioural directives) and inputs for directives. The latter can be an isolated scope binding or something used like scope.$eval(attrs.someOptionsForFooDirective) inside some directive's link function. So when you see something like this:

<img ns-lazy-src="images/foo.png" delay="100" /> 

It's not obvious that ns-lazy-src is a directive and delay is an input for that directive. Some directive writers use namespace also for directive options and inputs:

<img ns-lazy-src="images/foo.png" ns-delay="100" />

While it solves the problem of naming collision and it's definitely better than not using the namespace for directive's inputs and options, the problem of non-readability still exists.

I think a naming convention for options and inputs of directive makes everything cleaner. I haven't thought about the best style but maybe inputs of directives (I mean isolated bindings) can be prefixed with in- and options of directive can be prefixed with opt-

<img ns-lazy-src="images/foo.png" opt-delay="100" />

However it may introduce a confliction probability!

alirezamirian avatar Aug 13 '16 09:08 alirezamirian

interesting. Would love some community feedback on this. I'll mark as "help wanted"

johnpapa avatar Sep 05 '16 17:09 johnpapa