When you use a
.component(), you create DOM, when you use
.directive() you decorate DOM, that is the mindset
components
- Templates can be a String literal or a function that returns a template for compilation
- The $onInit lifecycle hook
-
- Use for initialisation logic
- Also use for inheriting parent Controller behaviour through require: {} (as Object syntax)
- Use $postLink for DOM manipulation
- Components are always created with isolate scope.
directive
- Use a Directive for binding custom behaviour to existing DOM.
Other thoughts/notes:
- writing component directives will make it easier to upgrade to Angular 2
- Angular 1.5 introduced the .component() helper method, which is much simpler than the .directive()
- for BDD tests you will need to match the ng-repeat selector elements for it to work with ng-repeat
Links:
Accessing parent components controllers through child components