ディレクティブ内でng-modelを使用する

Question

私はangularjsでカスタムディレクティブを定義しました。基本的には、ユーザーが選択ボックスから値を選択し、配列に値を追加するということです。これにより、私のカスタムディレクティブが呼び出され、画面上に新しい要素がレンダリングされます。私は、ディレクティブがコントローラの属性にバインドするために生成するテキストフィールドを必要とします。

Htmlの

<device-list ng-repeat="device in devices" key="device.key" display-name="device.display_name" bind-prefix="descriptions"></device-list> 

指令

angular.module('device_list_tag', []). 
    directive('deviceList', function() { 
    return { 
     restrict: 'E', 
     require: '?ngModel', 
     scope: { 
     devices: '=', 
     key: '=', 
     displayName: '=', 
     bindPrefix: '@' 
     }, 
     link: function(scope, element, attrs) { 

     var deviceListElement = $(element) 
     var containerDiv = $('<div>') 
      .addClass('row') 


     var labelTag = $('<label>').text(scope.displayName) 
      .addClass('span1') 

     var bindField = attrs.bindPrefix+'.'+scope.key 

     var textField = $('<input>') 
      .addClass('span3') 
      .attr('ng-model', bindField) 

     containerDiv.append(labelTag) 
     containerDiv.append(textField) 

     deviceListElement.append(containerDiv) 
     } 
    } 
    }) 

コントローラ

function DevicesCtrl($scope) { 
    descriptions = {} 
} 

としてNG-モデルは、ディレクティブのスコープに対してローカルであるかのようにそれが表示され、どのように私はそれを適用させますか親？ページにテキストフィールドがたくさんある場合

これは、選択ボックスで生成されたフィールドを除いて機能します。

Answer 1

わかりました。それは私の親属性を '='（Toshによって提案された）として渡すことを含んでいました。また、ng-modelディレクティブを認識させるために$ compileを呼び出す必要がありました。ここでは完全なコードは、私はこのクリーナーを行う方法があると確信していますが、私はそれを働かせてうれしいです。

angular.module('device_list_tag', []). 
    directive('deviceList', function($compile) { 
    return { 
     restrict: 'E', 
     scope: { 
     devices: '=', 
     key: '=', 
     displayName: '=', 
     bindAttr: '=' // added 
     }, 
     link: function(scope, element, attrs) { 

     console.log(scope) 

     var deviceListElement = $(element) 
     var containerDiv = $('<div>') 
      .addClass('row') 


     var labelTag = $('<label>').text(scope.displayName) 
      .addClass('span1') 

     var bindField = 'bindAttr.'+scope.key 

     var textField = $('<input>') 
      .addClass('span3') 
      .attr('ng-model', bindField) 

     $compile(textField)(scope) // added 

     containerDiv.append(labelTag) 
     containerDiv.append(textField) 

     deviceListElement.append(containerDiv) 
     } 
    } 
    }) 

Answer 2

bindField: '='をスコープのディレクティブ定義に追加することができます。 この変数を使用して親スコープに接続します。

Answer 3

あなたは）

1、求めている私たちは分離株スコープのフォーム要素を編集しながら、親スコープ・アレイが更新してください。はいの場合、私はこのフィドルで同様のシナリオを複製しましたhttp://jsfiddle.net/W7YrZ/2/。

私がやろうとしていたことの要約。

1）反復の現在の項目を使用して、にng-repeatの属性を割り当てます。

2）次に親スコープのコンテキストでこの属性を評価して、親スコープの配列オブジェクトの1つ（ここではprofiles）への参照（ポインタ）を与えます。

3）@マークRajcokは "プリミティブは値でコピーされ、オブジェクトは参照によってコピーされる"と述べています。私はそのオブジェクトをテンプレート文字列のテキストボックスにステップ2を介してバインドしています。ただangular.element

$('<input>').addClass('span3') 

にセレクタ$を交換するJavaScript、角度と検証のためにあるのjQueryコードの清潔さの理由のため

Answer 4

は、私は今、それと遊んだ

angular.element('<input>').addClass('span3')