4

私はAngular 1.5 のコンポーネントを使用して、その一方向バインディングの利点を得たいと考えていました: <hero-detail hero="ctrl.hero" save="ctrl.save(hero)"></hero-detail>. しかし、Todd Motto が彼のブログ ( Todd Motto's blog: One-way data-binding in Angular 1.5 ) で指摘しているように、プリミティブに対してのみ適切に機能します。したがって、プリミティブをバインドする必要がありました。

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

コンポーネントの次は、$onInitオンフックで、heroプリミティブからオブジェクトを作成します。

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

ユーザーが保存をクリックすると、指定された関数が呼び出されます。奇妙な部分は、ユーザーがコンポーネント内でヒーローの名前を変更して保存をクリックすると、親からバインドされた関数が呼び出されたときに、コンポーネントからの変更がないことhero-detailです。私の問題を示す plunker を作成しました: Plunk which shows problem with children/parent output binding in Angular 1.5 - 開発者コンソールを開いて [名前の設定...] をクリックし、[保存] をクリックすると、console.logs が表示されます。それからhero-detailSpawn2ですが、親コンテキスト（サービスとの会話などのロジックがあるべき場所$http）では、まだ古い値がありますSpawn。何か不足していますか？Angular docsのコードは、私のコードのように見えます:

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

何が起こっているのかわかりません。この問題に対処するために私を助けてくれてありがとう。PS Plunk のバージョンに問題がありましたが、今はすべて問題ありません。ブラウザーの開発者コンソールで、更新に関する問題を確認できます。

4

1 に答える 1

4

変数のスコープ (親または子) に関する混乱を避けるために、挿入された変数の前に$.

/* 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
    });
};

このようにして、式のどの変数が親スコープからのもので、どの変数がディレクティブ スコープからのものかを知ることができます。

于 2016-03-12T23:35:48.760 に答える