2017-05-23 1 views
1

私はAngularの新機能です。私のプロジェクトではかなり遠くまで到達することができましたが、私はちょっとした障害にぶち込まれています。Angularネストされたディレクティブでng-modelを動作させることができません

いくつかのフィールドデータを解析してからng-modelを適用して、フィールドで条件付きロジックを使用できるようにしたいとします。 私は実際にこの作業を持っています:HTMLロジックと

フィドル: https://jsfiddle.net/sup3rmassvie/ws8r4zm5/

それはフィールドを作る、入力変数と条件ロジック作品を更新します! (**最初のフィールドを '1'に設定してから、選択で '最初の選択'を選択してください)

問題はそれほど面倒でなく、新しいファイルに移植するのが簡単ではないようです。それを指示に書いてください。指令に

フィドル: https://jsfiddle.net/sup3rmassvie/bzkypvoo/

しかし、私はモデル(スコープは??)を正しく動作させることはできません。私は多くのことを自分で試してみましたが、gFieldディレクティブの新しく作成された入力のngモデルを作成するために、私がここで行う必要があることを先に進めているようです。

*注:私はすべての入力がテキスト入力として出てくる第二のペンで認識しています、私は任意の助けをいただければ幸いです

最初にこの部分を乗り越えるたかったです。

答えて

0

ワーキングフィドル(まだテキストのみの要素を表示する):

https://jsfiddle.net/sup3rmassvie/h7uxtr4q/は、だから私のコントローラで、私は

$scope.scopeReference = $scope; 

で範囲への参照をしなければならなかった。そして私は、渡されたこと<gf-form-fields fields="form.fields" model="scopeReference"></gf-form-fields>

次に、各ディレクティブでスコープ属性を使用して「モデル」として渡しました

.directive('gfFormFields', function() 
{ 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: 
     { 
      fields: '=', 
      model: '=' 
     }, 
     template: "<ul><gf-field ng-repeat='field in fields' field='field' model='model'></gf-field></ul>", 
    }; 
}) 

次に最後のディレクティブで、私は文字通り「あなたのスコープは今、この範囲である」ことを告げ

 ... 
     template: "<li class='gf-input'></li>", 
     link: function (scope, element) 
     { 
      var field = scope.field; 
      scope = scope.model; 
      scope.field = field; 

      ...add attributes... 

      element.append($compile(fieldInput)(scope)); 
     } 

が、これは誰かに役立ちます願っています!

関連する問題