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

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.

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.

This makes it easier to write an app in a way that's similar to using Web Components or using Angular 2's style of application architecture.

Advantages of Components:

simpler configuration than plain directives promote sane defaults and best practices optimized for component-based architecture writing component directives will make it easier to upgrade to Angular 2

When not to use Components:

for directives that rely on DOM manipulation, adding event listeners etc, because the compile and link functions are unavailable when you need advanced directive definition options like priority, terminal, multi-element when you want a directive that is triggered by an attribute or CSS class, rather than an element

Update (from august 22, 2017): $inject is recommended way for doing this in AngularJS. Read Styleguide: Styleguide link and AngularJS docs: AngularJS docs

For using DOM bindings in components instead of creating directive with link function you can inject '$element' or other service you need in your controller function, e.g.

app.component('pickerField', {
    controller: PickerField,
    template: '<span>Your template goes here</span>'
  });

  PickerField.$inject = ['$element'];

  function PickerField(element) {
    var self = this;
    self.model = self.node.model;
    self.open = function() {
      console.log('smth happens here');
    };
    element.bind('click', function(e) {
      console.log('clicked from component', e);
      self.open();
    });
  }