General html block can be reused in two ways: put into a directive as template, or simply include it with ng-include.
There are two common points between directive and ng-include:
(1) They can both be resused
(2) They can both have their own controller
But directive is more flexible and stronger than ng-include, because:
(1) Scope for directive is isolate, functions in parent scope can not be used in directive except it’s passed into directive.
While, functions in parent scope can be used directively used in ng-include which might cause mass.
(2) Values can all be passed into directive and ng-include, but ng-include can only accept init values, directive can accept changing values by accepting parameters. Which means directive can react with DOM, ng-include can not.
(3) Different functions(logic) according to different users can be passed into directive, function in ng-include can only be fixed(which should be in the controller for this ng-include to make the functionality also reusable instead of duplicate every time in its users).
There‘s one advantage that ng-include holds:
(1) As template for ng-include is fixed, browser doesn’t need to compile template for ng-include, so template loading for ng-include is faster than directive.
So, when one block of html code is reusable, if it‘s a fixed paragraph or the logic in it is fixed(eg. showing a list of constant), then ng-include should be a good choice, otherwise, directive is a better flexible choice.