Angular Component: how is the value specified for the output binding function defined in the parent?

Question

I wanted to use Angular 1.5 component to benefit from its unilateral peg: <hero-detail hero="ctrl.hero" save="ctrl.save(hero)"></hero-detail>. But, as Todd Motto points out on his blog: Todd Motto's blog: able to bind data in Angular 1.5 , it only works correctly for primitives. So I had to bind the primitives:

<hero-detail 
    name="ctrl.hero.name" 
    id="ctrl.hero.id"
    save="ctrl.save(ctrl.hero)"
  ></hero-detail>

And further in the component, on $onInithook, make heroan object from the primitives:

HeroDetailController.prototype.$onInit = function(){
  this.hero = {
    name: this.name,
    id: this.id
  } 
  console.log('OnInit called');
}

, "". , , , , hero-detail. , : Plunk, / Angular 1.5 - , " ...", "", console.log, , hero-detail Spawn2, ( , , $http), Spawn. - ? Angular docs :

<button ng-click="$ctrl.onDelete({hero: $ctrl.hero})">Delete</button>

, . . Plunk, - .

Answer 1

( ), $.

/* WAS
<hero-detail 
    name="ctrl.hero.name" 
    id="ctrl.hero.id"
    save="ctrl.save(ctrl.hero)"
 ></hero-detail>
 */

//SHOULD BE
<hero-detail 
    name="ctrl.hero.name" 
    id="ctrl.hero.id"
    save="ctrl.save($hero)"
></hero-detail>

:

HeroDetailController.prototype.saveHero = function(hero) {
    console.log('Hero name from child: ' + hero.name);
    this.save({
      $hero: hero
    });
};

, , , - .