Angular 1.5 component vs. old directive - where is a link function?

troorl picture troorl · Nov 14, 2015 · Viewed 46k times · Source

I've been reading this nice recent article about new .component() helper in Angular 1.5, which is supposed to help everyone to migrate to Angular 2 eventually. Everything looks nice and simple, but I couldn't find any information about DOM manipulation inside components.

There is a template property though, which can be a function and accept $element and $attrs arguments. Still it's not clear to me if that's the replacement for a link function. It doesn't seem so.

Answer

jody tate picture jody tate · Jan 24, 2016

EDIT 2/2/16: The 1.5 documentation now covers components: https://docs.angularjs.org/guide/component


Some thoughts based on some reading (links below):

  • Components aren't replacements for directives. A component is a special type of directive that organizes a controller with a template.

  • Components do not have a link function and controllers still are not where you'd handle DOM manipulation.

  • If you need DOM manipulation, your component can use other directives that include that DOM manipulation in a link function.

It took me a while to figure this out, but once I did it made some sense: components are directives but not all directives are--or need to be--components.

The question about link functions is a natural one, or was to me, when I thought components were replacing directives. Why? Because we've been taught to put DOM manipulation inside a directive's link function: "Directives that want to modify the DOM typically use the link option to register DOM listeners as well as update the DOM." https://docs.angularjs.org/guide/directive.

If you're running with that assumption (components replace directives), then you'll find that the Angular docs don't answer the question because, well, it's not the right question once you know the purpose of a component. (Components are described in the $compileProvider documentation not the directive documentation.)

Background reading

What I say above is really a rephrasing of what Todd Motto has said in what's probably the best discussion (so far) on components and directives:

https://www.reddit.com/r/angularjs/comments/3taxjq/angular_15_is_set_to_introduce_the_component/

It could be useful to have those comments pulled out into a more general article.

Most articles on components don't mention a link function (this doesn't mean these aren't excellent articles):

https://toddmotto.com/exploring-the-angular-1-5-component-method/

https://medium.com/@tomastrajan/component-paradigm-cf32e94ba78b#.vrbo1xso0

https://www.airpair.com/angularjs/posts/component-based-angularjs-directives

Or when the link function is mentioned it is in parentheses:

http://teropa.info/blog/2015/10/18/refactoring-angular-apps-to-components.html

One article says that components, "use controllers instead of link functions." But it's not an "instead" situation: controllers aren't stand-ins for link functions.