Question

我有一个像下面这样的对象：

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

我必须在同一页面上的两个不同视图中表示这些值。第一个视图在textareas中呈现xData和yData，它使用SplitArray指令在文本区域的每一行显示值1,2,3一个值。

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

第二个视图在文本框中显示这些值。 xData分为三个文本框，如下面的

 <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）中进行更改时，我可以在第二个视图（文本框）中正确地看到更改的值，但是当我在view2中进行更改时，更改不会反映在textareas中。当我在文本框中更改console.log时，我可以看到模型显示新值。我的问题是为什么模型更改没有反映在textareas中，我是否需要在splitArray指令中进行一些更改？

Answer 1

这似乎是设计上ngModel不处理对象或数组。在ngModelController code L1085-L1089)中，!==运算符用于比较以查看模型值是否已更改。由于$modelValue始终等于xdata更改时的值（xdata[*]），因此ngModelController未检测到模型的任何更改。

但是，您可以通过在指令中添加观察程序来解决此问题，以便在调用观察程序时使$ modelValue无效。

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

以下是演示此解决方法的Plunker：http://plnkr.co/edit/mUL577?p=preview

另一种方法是在ngChange字段上使用input指令使模型值无效。但是，这引入了指令之间的耦合。

AngularJS上存在跟踪此问题的问题：https://github.com/angular/angular.js/pull/2553

此外，此处的split-array指令基本上正在执行ngList正在执行的操作。但是，ngList在渲染到视图（https://github.com/angular/angular.js/pull/2561）时不会尊重分隔符。

AngularJS模型绑定了两个字段

1 个答案: