AngularJS 1.5 - コンポーネントに双方向バインディングを設定する方法

Question

Angular 1.Xのディレクティブは、デフォルトで双方向バインディングを持つように設定されています。コンポーネントにはデフォルトで独立したスコープがあります。以下の状況で正しくcontrollerVariable負荷、私は上記のディレクティブのように設定している場合は

<div class="my-view"> 
    {{controllerVariable}} 
</div> 

：私はのように見える景色を持って

<div ng-controller="myController"> 
    <my-view></my-view> 
</div> 

しかし、私はそれのように設定している場合

myApp.component('myView', { 
    templateUrl: '/path/to/view', 
    bindings: '=' 
}); 

この場合、変数値は表示されません。変数に$ctrlを追加しようとしました：

<div class="my-view"> 
    {{$ctrl.controllerVariable}} 
</div> 

しかし、これには値も表示されません。

私はここで何が欠けていますか？

Answer 1

私は明示的に私はバインドしたい変数を述べる必要がありました：

また

myApp.component('myView', { 
    templateUrl: '/path/to/view', 
    bindings: { 
     controllerVariable: '@' 
    } 
}); 

、controllerVariableが文字列であることから、私は結合@記号を使用していました。

Answer 2

あなたがコンポーネントにディレクティブから値を渡す必要があります：あなたは例のようにコンポーネントにアクセスすることができます

myApp.component('myView', { 
    templateUrl: '/path/to/view', 
    bindings: { 
     passedVar: '=' 
    }, 
    controller: function() { 
     var vm = this; 
     console.log(vm.passedVar); 
    } 
}); 

：

<my-view passed-var='ctrl.passedVar'></my-view> 

とコンポーネントで

サービスを使用して情報を処理したり、requireを使用してコンポーネントがディレクターのコントローラにアクセスできるようにするなど、いくつかの方法がありますve。あなたは上記の方法と他の方法を見つけることができます：https://docs.angularjs.org/guide/component。