6

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-model がディレクティブのスコープに対してローカルであるように見えますが、親に適用するにはどうすればよいですか? ページにテキストフィールドがたくさんある場合

<input ng-model="descriptions.test"/>

選択ボックスによって生成されたフィールドを除いて機能します。

4

4 に答える 4

9

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

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)
      }
    }
  })
于 2012-10-04T01:11:50.170 に答える
2

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

于 2012-10-04T00:09:43.573 に答える
1

お願いですか、

1) アイソレート スコープ フォーム要素を編集している間、親スコープ配列を更新したままにします。はいの場合、このフィドルhttp://jsfiddle.net/W7YrZ/2/で同様のシナリオを複製しました。

やってみたかったことまとめ。

1)反復の現在のアイテムで属性umbilicalを割り当てます。ng-repeat

2）次に、親スコープのコンテキストでリンク関数内でこの属性を評価します。これにより、親スコープ配列hereの配列オブジェクトの1つへの参照（ポインター）が与えられますprofiles。

3)次に、@Mark Rajcok が言うように、「プリミティブは値によってコピーされ、オブジェクトは参照によってコピーされます」。手順 2 で取得したオブジェクトをテンプレート文字列のテキスト ボックスにバインドしています。

于 2013-03-05T05:23:33.543 に答える