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();
    });
  }

Ok, so it appears that controller is the right place for it now, since it is the only possible one. Also we can't use a replace option in the a component helper.

You can use $postLink() function which is in newest angular.

https://docs.angularjs.org/guide/component

> Similar to the post-link function this hook can be used to set up DOM > event handlers and do direct DOM manipulation.

According to current Angular2 documentation (see https://github.com/angular/angular/blob/master/modules/angular2/docs/core/02_directives.md) there will still be directives in Angular2. So basically you will be able to use both @Directive or @Component, where:

• Directives are useful for encapsulating behavior.
• Component is a directive which uses shadow DOM to create encapsulate visual behavior. Components are typically used to create UI widgets or to break up the application into smaller components.

So According to this, if you need DOM manipulation you will need to use @Directive, therefore Angular.directive in Angular 1.x. Event bindings can be done using the host properties. Concerning DOM manipulation per se there is still missing documentation (e.g. https://github.com/angular/angular/blob/master/modules/angular2/docs/core/09_compilation.md or https://github.com/angular/angular/blob/master/modules/angular2/docs/core/08_lifecycle.md) but you can look for Lifecycle as suggested here https://stackoverflow.com/a/32062065.

As a short answer, with Angular 1.5+, continue using angular.directive if you have DOM access, otherwise encapsulate into angular.component. Also try to reduce as much as possible the use of $scope for non-dom event and prefer RxJS for that see https://medium.com/front-end-developers/managing-state-in-angular-2-using-rxjs-b849d6bbd5a5#.obgb6dl6n,