If Angular elements are treated as blocks or wrappers
When using element directives, I've seen Angular element directives used in two ways:
1. As block level components
An element is styled display:block
, is a component, and its children are children, so the element itself is a component.
Using directive:
<example class="Example"></example>
Html directive:
<header class="Example-header"></header>
<img class="Example-image">
<footer class="Example-footer"></footer>
2. As an inline wrapper for a component
The element remains as display:inline
and effectively acts as an invisible wrapper for the component itself:
Using directive:
<example></example>
Html directive:
<div class="Example">
<header class="Example-header"></header>
<img class="Example-image">
<footer class="Example-footer"></footer>
</div>
Obviously each has advantages and disadvantages like extra markup, loss of layout due to inline element, etc., but is this the correct way? or is this another one of Angular's whims?
source to share
I'm surprised no one answered, but the idea behind creating custom directives is the ability to create reusable pieces of code that do a specific bit of functionality on your site.
This functionality, however, doesn't care about the styles you intend to use. Of course, you can conditionally change classes and styles from Angular, but the main component when working with the framework is data.
With that said, there is no "right way" as you dare in your question. Develop a directive that suits your needs and the style of your site.
source to share
This is probably opinion based at first, but I'd really like to share my point of view on this.
If you are really following the angular way of executing directives, none of the theses are the correct way.
Directives are for adding behavior to an HTML element.
The less the directive adds HTML, the better, as it allows you better control over that element.
Let's take an example.
We have a data grid (say ui-grid, it doesn't really matter)
<ui-grid ...>
...
</ui-grid>
I got the idea to add some button to add or remove an item in the grid. I first came up with this
<ui-grid ...>
...
</ui-grid>
<button ng-click="addItem()">Add</button>
<button ng-click="removeItem()">Remove</button>
I'm really happy with this and everything is fine, but finally I need to use theses in some other views. I will have to duplicate HTML, duplicate JS and adapt it to the collection.
General error
This is obviously not a good idea.
I'll make a directive instead. Let's say a "button list": it creates the same html and behavior.
<ui-grid ...>
...
</ui-grid>
<button-list></button-list>
It's pretty cool.
Now I have a need. On one view I need the add button to be blue, on the other I don't need to have a delete button, and on the last one I want the button text to be "X" and "+" (this was some customer request in real history).
I could create a large object with a list of parameters, etc., but it hurts a lot and you need to touch the directive every time you need to add custom behavior.
Nice way to go
Now let's think again about what I wanted to do.
I want the button to interact with the grid ... and that's pretty much it. This is how we should build a custom directive.
We could then create this directive like this:
<div grid-button-container collection="mycollection">
<ui-grid ...>
...
</ui-grid>
<button grid-add-item>Add</button>
<button grid-remove-item>Remove</button>
</div>
So what do we have here? We have three different directives.
- grid-button-container: its duty is to hold the list for sub-directives.
- grid-add-item: Adds a clickable function that adds an item to the container grid collection.
- grid-remove-item: Adds an on click function that removes an item to the container grid collection.
For grid-add-item and grid-remove-item, container-grid-grid will be used.
I cannot describe the whole implementation of this (it will take too long), but I think this is how directives should be used. For example, almost no angular inline directives (ng- *) add HTML and just add behavior, I think all directives should be structured this way.
Pro:
- You have complete control over your HTML
- Directives are tiny and trivial
- It's really reusable
Minuses:
- Can be harder and longer to implement.
To make an endpoint, the two ways you are asking for are just different. No one is better than the other, it will just depend on your own HTML organization and it will depend on the use of the directive.
Hope it helped.
source to share