2016-11-15 2 views
0

しばらくの間Angularを使用していましたが、コントローラ(構文としてコントローラを使用しています)とディレクティブの間の双方向データバインディングについては少し失われています。そのコントローラーのテンプレート内にあります。角度指令を更新する親コントローラオブジェクト

このディレクティブの目的は、私が収集する必要のある非常に特定のデータセット(写真、テキストなど)の入力フィールドになることです。

どのように動作しますか。

マイコントローラFormCtrlがアプリキャッシュからデータを読み込みます。次に、このデータをctrl.form_fieldsというオブジェクトに渡します。

データを表示するには、ctrl.form_fieldsにアクセスできるように指示が必要です。さらに、ディレクティブ内でデータの変更が行われた場合は、FromCtrl ctrl.form_fieldsオブジェクトが更新されます。

私は、親コントローラと子ディレクティブの間の双方向バインディングについていくつかの研究と実験を行ってきましたが、わかりません。誰かが理論的な例を掲示できるなら、本当に感謝します。

私は$ scopeを使用したくありません。$ parent etc ...これは、あまりにも面倒でメンテナンスが難しいため、これを達成するためです。プラス私はできるだけ$スコープを使用しないようにしています。

乾杯、 ディーン

答えて

0

ディレクティブ(の一部)の例:

controller: FooController, // import FooController as './foo.controller'; 
controllerAs: 'vm', 
replace: true, 
scope: { 
    fields: '=formFields' 
}, 
template: '<input type="text" ng-model="fields" />' 

は、その後、あなたのコントローラでは、あなたが参照 'vm.fields' を使用することができます。入力フィールドは次のとおりです:

<input type="text" form-fields="fields" /> 

これはテストしていません。

1

私はあなたの質問を正しく理解していないかもしれませんが、属性を使ってオブジェクト/値をディレクティブに渡すことはできません。双方向バインディング式を使用しますか?

angular 
 
    .module('app') 
 
    .directive('myDirective', function() { 
 
    return { 
 
    restrict: 'E', 
 
    templateUrl: 'myTemplate.html', 
 
    scope: { 
 
     obj: "=" // Two way decleration 
 
    }, 
 
     
 
    controller: function($scope) { 
 
     console.log($scope.obj); 
 
    } 
 
    } 
 
    });
<my-directive obj="ctrl.object"></my-directive>

角度

+0

ありがとうございます。これはうまくいった。私はちょうどこの事例で双方向バインディングの周りに私の頭を得ることができませんでした。私は '='宣言が欠けていた。 :)しかし、私の指示文では、Contollers変数が利用できるようになりましたが、$ scopeにしかありません。私は$ scope.dataを使用していないので、それを渡すことができる方法はありますか? –

関連する問題