1

我有一个如下对象：

  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 中进行更改时，更改不会反映在 textarea 中。当我在文本框中更改控制台时，我可以看到模型显示新值。我的问题是为什么模型更改没有反映在 textareas 中，我是否需要对 splitArray 指令进行一些更改？

4

1 回答 1

0

这似乎是设计ngModel使然不处理对象或数组。在ngModelController 代码 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）。

于 2013-08-27T08:02:19.533 回答