Angularjs。ネストされたディレクティブの継承スコープ

Question

現在、コントローラを使用せずに、Angular2スタイルでコードを記述しようとしています。外部および内部指令からのデータ転送の問題に直面しています。どのように正しく行うには？ 主な問題は、ディレクティブの内部が外部スコープにアクセスし、内部ディレクティブのテンプレート内のデータを使用する方法です。例 on codepen

<test-directive> 
    <nested/> 
</test-directive> 

Answer 1

を値を渡す必要があります。

class Nested { 
    restrict='E'; 
    template='<p>Nested {{inner.outer}} {{inner.last}}</p>'; 
    controller=function(){ 
    this.last='Pupkin'; 
    }; 
    controllerAs='inner'; 
    bindToController={ 
    outer: '=' // a communicating point of outer and inner directives 
    }; 
} 

ポイントはbindToControllerに、あなたはここにouterとして、エンドポイント変数を追加することができ、ということです。外側のテンプレートには、<nested outer="outer.first"/>のような値を付けます。ギュンターZöchbauerの答え@

あなたはAngualr 1とコンポーネントのスタイルを使用しての全体の例を見たい場合は、あなたが私のexpress-angular-es6-starter、ES6とTODOのMVCとコンポーネントのスタイルを見ることができ、また、角度2

のためであります角度1のコード。

Answer 2

あなたは私version変更を参照してください、あなたはcodepen簡略化されてきた明示的

<test-directive> 
    <nested [someInput]="somePropertyOnParent"></nested> 
</test-directive> 

@Component({ 
    selector: 'nested', 
    template: `<ng-content></ng-content>`)} 
class Nested { 
    @Input() someInput; 

    ngOnInit() { 
    console.log(this.someInput); 
    } 
}