Purpose of $element and $ attrs in component controllers with angularJS components 1.5

Question

I am working on getting up to speed with 1.5 angular components. I have been following todd Motto's videos to get a start on components along with angular's documentation https://docs.angularjs.org/guide/component.

At this point it seems components are taking the place of directives that use controllers, but in our 1.5 code we still would use directives for dom manipulation.

What is the purpose of $element, $attrs inside of a component controller? These seem to be available for manipulation. Here is the link to the plunker off of the docs. I know they are not using $element, but it is the example I am reading. http://plnkr.co/edit/Ycjh1mb2IUuUAK4arUxe?p=preview

But in code like so ...

 angular
  .module('app', [])
  .component('parentComponent', {
    transclude: true,
    template: `
      <div ng-transclude></div>
    `,
    controller: function () {
      this.foo = function () {
        return 'Foo from parent!';
      };
      this.statement = function() {
        return "Little comes from this code";
      }
    }
  })
  .component('childComponent', {
    require: {
      parent: '^parentComponent'
    },
    controller: function () {

      this.$onInit = function () {
        this.state = this.parent.foo();
        this.notice = this.parent.statement();
      };
    },
    template: `
      <div>
        Component! {{ $ctrl.state }}
        More component {{$ctrl.notice}}
      </div>
    `
  })

What would be the use of $element if we are not manipulating the dom?

Answer 1

That's a great question. And I have a simple answer for it.

They take place in components just because Component is syntax sugar around of directive.

Before angular added Components, I was using some kind of component syntax for directives, it was like a convention, that in our project we have two kinds of directives, one is responsible for DOM manipulations, the second is directives with templates which should not manipulate DOM. After components were added, we did not more than changed names.

So Component is nothing more than simple directive which was created as new entity which:

1. Always has template
2. Scope is always isolated
3. Restrict is always Element

I think you can find even more answers in angular sources, but I advise you do not mix these entities, and in case you need to manipulate DOM inside of your component, just use directive inside.

Answer 2

Angular component life cycle hooks allow us to do DOM manipulation inside component controller using $element service

var myApp = angular.module('myApp');
myApp.controller('mySelectionCtrl', ['$scope','$element', MySelectionCtrl]);

myApp.component('mySection', {
    controller: 'mySelectionCtrl',
    controllerAs: 'vm',
    templateUrl:'./component/view/section.html',
    transclude : true
});

function MySelectionCtrl($scope, $element) {
    this.$postLink = function () {
        //add event listener to an element
        $element.on('click', cb);
        $element.on('keypress', cb);

        //also we can apply jqLite dom manipulation operation on element
        angular.forEach($element.find('div'), function(elem){console.log(elem)})

    };

    function cb(event) {
        console.log('Call back fn',event.target);
    }
}

declare component in html

<my-section>
<div class="div1">
    div 1
    <div>
        div 1.1
    </div>
</div>
<div class="div2">
    div 1
</div>

component's partial template(./component/view/section.html)

<div>
<div class="section-class1">
    div section 1
    <div>
        div section 1.1
    </div>
</div>
<div class="section-class1">
    div section 1
</div>