1

次のようなオブジェクトがあります。

  MyObj{
    Groups:[{name:"test1": xdata:"[1,2,3]"  }, {name:"test2": xdata:"[5,6,7]"  }]
  }

これらの値を同じページの 2 つの異なるビューで表す必要があります。最初のビューは xData と yData をテキストエリアにレンダリングし、SplitArray ディレクティブを使用して、テキストエリアの各行に値 1、2、3 を表示します。 

 <textarea   split-array="" ng-model="group.xdata"  > </textarea>

2 番目のビューでは、これらの値がテキスト ボックスに表示されます。xData は次のように 3 つのテキスト ボックスに分割されます

 <input type="text" ng-model="group.xdata[0]" >
 <input type="text" ng-model="group.xdata[1]" >

以下は SplitArray ディレクティブです

myModule.directive('splitArray', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attr, ngModel) {

            function fromUser(text) {
                return text.split("\n");
            }

            function toUser(array) {    
                return array.join("\n");
            }

            ngModel.$parsers.push(fromUser);
            ngModel.$formatters.push(toUser);
        }
    };
})

view1(textarea) を変更すると、2 番目のビュー (textboxes) で変更された値が正しく表示されますが、view2 を変更すると、変更が textareas に反映されません。テキストボックスの変更で console.log を実行すると、モデルが新しい値を示していることがわかります。私の質問は、モデルの変更がテキストエリアに反映されない理由です。splitArray ディレクティブを変更する必要がありますか?

4

1 に答える 1

0

ngModelこれは、がオブジェクトまたは配列を処理しないように設計されているようです。ngModelController コード L1085-L1089)では、モデル!==値が変更されたかどうかを比較するために演算子が使用されます。は変更時$modelValueに常に値 ( xdata)と等しいため、はモデルからの変更を検出しません。xdata[*]ngModelController

ただし、ディレクティブにウォッチャーを追加して、ウォッチャーが呼び出されるたびに $modelValue を無効にすることで、これを回避できます。

scope.$watchCollection(attr.ngModel, function (newValue, oldValue) {
  ngModel.$modelValue = oldValue;
});

この回避策を示すプランカーを次に示します: http://plnkr.co/edit/mUL577?p=preview

もう 1 つの方法は、フィールドでngChangeディレクティブを使用してモデル値を無効にすることです。inputただし、これによりディレクティブ間の結合が発生します。

これを追跡している AngularJS には問題があります: https://github.com/angular/angular.js/pull/2553

また、split-arrayここでのディレクティブは基本的に何ngListをしているのかということです。ただし、ngListビューにレンダリングするときにセパレーターを尊重しません ( https://github.com/angular/angular.js/pull/2561 )。

于 2013-08-27T08:02:19.533 に答える