約1.5+ネストされたコンポーネントバインディング約束により返された値

Question

現在、私はAngularJSコンポーネントを学んでいます。私は親コンポーネントの値は、RESTfulなサービスによって返されることを知って、親コンポーネントと子コンポーネント間の値をバインドしたいと思います：

parent.template.html

<h3>{{$ctrl.hero.name}}</h3> 
<child hero="$ctrl.hero"></child> 

parent.component.js

angular.module('myApp') 
    .component('parent', { 
     templateUrl:'parent/parent.template.html', 
     controller: ['MyService','$routeParams', parentController] 
    }); 

function parentController(MyService, $routeParams) { 
    var self = this; 
    MyService.get({ heroId: $routeParams.heroId }) 
     .$promise 
      .then(function (data) { 
       self.hero = data; 
       console.log("self.hero:" + self.hero); //this will log the hero correctly. 
      }); 
    console.log("self.hero.name"+ self.hero.name) // this will log "undefined" 
}; 

child.template.html

<div>{{$ctrl.hero.name}}</div> 

child.component.js

angular.module('myApp') 
    .component('child', { 
     templateUrl:'child/child.template.html', 
     controller: childController, 
     bingdings: { 
      hero:'=' 
     }, 
     transclude:true 
    }); 

function childController() { 
    var self = this; 
    console.log("child hero: " + self.hero); // this will output "undefined" 
}; 

私は子コンポーネントが原因「英雄」はで返されているという事実に親コンポーネントから「英雄」を得ることができなかったと仮定$約束。

このような値をバインドする方法はありますか？

ありがとうございました！

よろしく、この場合、 レオナ

Answer 1

は、それは、単純なタイプミスだ - bindingsの代わりbingdingsでなければなりません。追記として、この特定のケースでは、one-way bindingいわゆる使用することは有益だが、バージョン1.5以降で利用可能：

.component('child', { 
    templateUrl:'child/child.template.html', 
    controller: childController, 
    bindings: { 
    hero: '<' 
    }, 
    transclude:true 
}); 

...子コンポーネントの変化は、ここで親スコープに影響を与えることはありません、そして、彼らはされませんよう追跡される。それは良いことです - 両方のメモリとスピードワイズ。