AngularJs 1.5 ES6: undefined bindings in the controller

Question

bindings are passed to components in html, but undefined in the controller.

<hero value="foo"></hero>

hero.component.js

import template from './hero.html';
import controller from './hero.controller';

let heroComponent = {
  restrict: 'E',
  bindings: {
    value: '@'
  },
  template,
  controller
};

HeroController.js

class HeroController {
  constructor() {
    this.name = 'hero';
    console.log(this.value); // undefined!
  }
}

hero.html

<section class="hero">
  <h1>AngularJs ES6 Example</h1>
  <!-- Value is works within template -->
  <h3>You can find me inside {{ $ctrl.name }}.html {{ $ctrl.value }}</h3>
</section>

I am using angular version 1.5.0

Answer 1

its value is undefined because the value was loaded after api call, using ng-ifsolve the problem

<hero ng-if="$ctrl.value" value="$ctrl.value"></hero>

Answer 2

It is unlikely that bindings will be allowed during the constructor call. What angular internally does is instantiate the controller and inject dependencies when the constructor is called. Then the bindings are filled.

$onInit $onChanges. ( ).