It all depends on what you want from the code snippet. Personally, if the code does not have any logic or even does not need a controller, then I go with ngInclude . I usually add more “static” html fragments that I don't want to clutter up the view here. (i.e. suppose a large table whose data comes from the parent controller anyway. It's cleaner to have <div ng-include="bigtable.html" /> than all these lines cluttering the view)
If there is logic, DOM manipulation, or you need to configure it (in other words, otherwise), it is used in other cases, then directives are the best choice (at first they are complex, but they are very powerful, give it time).
ngInclude
Sometimes you will see ngInclude's , which are affected by their external $scope / interface . Say like a big / complex repeater. Because of this, these two interfaces are connected to each other. If something in the main $scope changes, you should change / change your logic inside the partial part.
directives
Directives, on the other hand, can have explicit areas / controllers / etc. Therefore, if you are thinking of a scenario where you need to reuse something several times, you can see how to link your own scope is easier and less confusing.
In addition, anytime you interact with the DOM at all, you must use the directive. This makes it better for testing and separates these actions from the controller / service / etc, what you need!
Tip. . Do not use no to use the restriction: "E" if you care about IE8! There are ways around this, but they are annoying. Just make life easier and stick with the / etc attribute. <div my-directive />
Components [Update 3/1/2016]
Added in Angular 1.5, it is essentially a wrapper around .directve() . The component should be used most of the time. It removes a lot of template code, by default, for example, restrict: 'E', scope : {}, bindToController: true . I highly recommend using them for almost the entire application, so it’s easier to upgrade to Angular2.
Finally:
You should create components and directives most of the time.
- More extensible
- You can create templates and have an external file (e.g. ngInclude)
- You can use the parent scope or isolate your own scope inside this directive.
- Better reuse throughout the app
Update 3/1/2016
Now that Angular 2 is slowly ending, and we know the general format (of course, there will still be some changes here and there), I just wanted to add how important it is to make components (sometimes if directives you need to be limited to: for example, "E") .
The components are very similar to Angular 2 @Component . Thus, we encapsulate the logic and html in the same area.
Make sure that you encapsulate as many components as possible into components, this will greatly facilitate the transition to Angular 2! (If you decide to make the transition)
Here is a good article describing this migration process using directives (very similar if you are going to use components, of course): http://angular-tips.com/blog/2015/09/migrating-directives-to-angular-2/