2

ディレクティブとしてモデル化した非常に単純な UI コントロールがあります。これは、国コード用と番号用の 2 つの入力フィールドを持つ電話番号のエディターです。

ディレクティブの使用法は次のようになります。

<phone-editor ng-model='phoneNo'></phone-editor>

ディレクティブの宣言では、ngModel が必要で、テンプレートは次のようになります。

<input type="text" ng-model="countryCode" />
<input type="text" ng-model="number" />

元のモデルを 2 つのフィールドに構成および分解する方法は明らかです。

私が理解できない(555) 555-5555のは、2番目の入力フィールドのngModelコントローラーにアクセスするためだけに別のディレクティブを定義せずに、プレーンな数値の代わりに表示するように2番目のフィールドにフォーマッターを使用するにはどうすればよいですか?

どうにかして子 ngModel コントローラーにアクセスできますか?

4

1 に答える 1

4

Angular コードベースでいくつかの検索を行ったところ、動作するはずのものが見つかりました。

app.directive('phoneEditor', function() {
  return {
    restrict: 'E',
    replace: true,
    template: '<div>'
      + '<input type="text" ng-model="countryCode">'
      + '<input type="text" ng-model="number">'
      + '</div>',
    link: function(scope, element) {
      scope.number = 555;
      var input1 = element.find('input').eq(0);
      var input2 = element.find('input').eq(1);
      input1Ctrl = input1.controller('ngModel');
      input2Ctrl = input2.controller('ngModel');
      console.log(input1Ctrl, input2Ctrl);
    }
  };
});

プランカー。

于 2013-03-08T20:03:55.423 に答える