Ion vs div directives

1

could anyone point out the difference between the ion directives and divs with the certain class?
For example, what’s the difference between:

<ul class="list">
    <li class="item">
      ...
    </li>
</ul>

and

<ion-list>
    <ion-item>
      ...
    </ion-item>
</ion-list>

Thank You!

2

The directive gives you access to many options in the API. The API methods listed in the bottom of the docs pages (like here for example) gives you a sense of what the directive allows you to do, instead of just using the CSS associated with the class.

The comments in the source code actually say it better than I did:
https://github.com/driftyco/ionic/blob/master/js/angular/directive/list.js#L12-L17

HTH

1 Like
3

OK so it is definitely best practice to use the ion directives, right?

4

I’m not a ionic expert like many people in this forum, but I would say it’s cost/benefit. Will what you are trying to do need the functionality of the directive, or do you just want the pretty CSS?

If you don’t need the directive, I would not use it. But most of the lists I’m writing need the cool functionality that the driftyco people have written.

1 Like
5

As @mbeizer says, it depends on your needs. I wouldn’t say its best practice to use ion directives, but I wouldn’t say there is a good reason not to use them either. I like the distinction between if you just need the CSS or if you need the features (such as list swipe buttons).

My rule of thumb is not to use the directives unless I need their features.

6

Sounds logical, thank you.

Was kind of confused because it’s not really explained in the docs and in the JS section obviously the ion variant is used whereas the css docs is using divs.

1 Like
7

Like @gnomeontherun said:
If you only need styling (CSS)
use the CSS-version

If you need javascript functionalities like events, settings and so on
us the directive Javascript-version

I like also the seperation in the ionic-documentation between CSS / Javascript-Components.

If you use directives where you do not need them -> there are useless javascript tranformations of your dom and so on.
And everything in javascript takes time :wink: .

8

Thank you, bengtler.
Performance might be the one reason not to use directives, if you dont need them.

1 Like
9

Hello everyone,

I’m new to Ionic. After reading all your explanation, I just would like to make sure I understand correctly.

My question, if I just need a list with X icon to delete list item, I can use DIV instead of Directives, am I understand correctly?

Please advice, thank you.