2

私が取り組んできた問題：

元の問題 (一方向バインディングのみに対処) は、ここで見つけることができます: コントローラからディレクティブに ngModel を渡す/更新できません

ディレクティブ内からビューへの一方向バインディングを取得することができました。しかし、たとえば、ページの読み込み時に選択をプッシュしたい場合、双方向バインディングを機能させることができません。最初のディレクティブ内の ng-model がデータを取得していることがわかりますが、子ディレクティブでさまざまなスコープ設定を試してみましたが、それが壊れるか、以前と同じことをします-何もしません。

ビューで ng-model にアタッチされたバインディングに単純なオブジェクトをプッシュすると、ウォッチャーは $viewValue をディレクティブのスコープ オブジェクトに割り当てるように、基本的な$watch関数をセットアップしました。それはこれを行い、ui-select に割り当てられた ng-model バインディング内のオブジェクトをはっきりと見ることができますが、ディレクティブは既存の選択を一掃することによってのみ応答します。

ウォッチ機能は次のとおりです。

scope.$watch(function() {
    return ngModel.$viewValue;
}, function(newVal) {
    console.log(newVal, scope.options);
    scope.options.selected = newVal;
});

この関数を使用して、ui-select を操作するたびにビューを更新します (正常に動作します)。

scope.changer = function() {
   ngModel.$setViewValue(scope.options.selected);
   console.log(scope.options.selected);
};

いじくり回し用プランカー

したがって、予想される動作は次のとおりです。

  • ui-select からの選択は select に表示され、ビューにも渡されます
  • 「変更」ボタンをクリックすると、データがビューに表示され、ui-select に渡されます。
4

1 に答える 1

2

状況は、その中に ui-select を含むディレクティブがあったことでした。メイン コントローラ スコープからディレクティブ スコープを介して ui-select のスコープまでデータを取得する方法は、ngModel.$viewValueディレクティブのリンク関数にウォッチ関数を配置することでした。

次に、変更があるたびに、その新しい値をそのディレクティブのスコープのオブジェクトに割り当てて、それを保持しました。次に、ui-select のリンク関数に watch 関数を設定して scope.$parent.myVal を監視し、メイン コントローラーからその変数に何かがプッシュされた場合に、ui-select がそれを確認できるようにします。$select.selectedその場合、ui-select ディレクティブで選択された項目のコンテナーである 新しい値を割り当てます。

scope: trueui-select はそのディレクティブで使用するため、インスタンス化されたスコープの子になることに注意してください。これにより、 で親のスコープにアクセスできます$parent。

ディレクティブの監視関数:

scope.$watch(function() {
  return scope.$parent.myVar;
}, function(newVal) {
  $select.selected = newVal;
})

ui-select に追加するウォッチ機能:

scope.$watch(function() {
  return ngModel.$viewValue;
}, function(newVal) {
  scope.myVar = newVal;
})

プランカーデモ

于 2015-04-20T18:15:06.150 に答える