Question

我试图让一个例子在我有一个大JSON对象的地方工作，我想通过textarea启用编辑该对象的小子集的原始json源（类似于＆＃34;高级设置＆＃34;区域）。

编辑顶级元素$ scope.objects时，JSON编辑器工作正常，并遵循启用指令更新其绑定模型的标准约定，但是当我尝试通过ng-repeat为每个子对象输出一组编辑器时，子对象的更改不会显示在完整的JSON对象输出中（或者在第二个ng-repeat中输出子集）。

这里是我想要实现的目标：http://jsfiddle.net/tommcquarrie/N8B6y/您将在顶部示例中看到，因为我正在编辑JSON数据的小子集，左边的变化不适用于右边。向下滚动到底部示例，它可以工作，但这只是因为我在左边编辑整个对象并在右边输出整个对象。

我能做些什么来通知链条＆＃39;更新的对象中的叶节点是否已更新？以下是相关代码的子集：

控制器容纳对象：

app.controller('Ctrl', ['$scope', function($scope) {
    $scope.model = {};
    $scope.model.objects = [
  {
    "param1": "value1",
    "param2": "value2",
    "param3": "value3",
      "param4": {
          "subParam5": true,
          "subParam6" : false
      }
  },
  {
    "param1": "value1",
    "param2": "value2",
    "param3": "value3",
      "param4": {
          "subParam5": true,
          "subParam6" : false
      }
  },
  {
    "param1": "value1",
    "param2": "value2",
    "param3": "value3",
      "param4": {
          "subParam5": true,
          "subParam6" : false
      }
  },
  {
    "param1": "value1",
    "param2": "value2",
    "param3": "value3",
      "param4": {
          "subParam5": true,
          "subParam6" : false
      }
  }
];
}]);

角度观点：

<div ng-app="app" class="container">
        <div ng-controller="Ctrl" class="row">
            <!-- individual object editors -->
            <div ng-repeat="object in model.objects" class="well">
                <textarea json-editor ng-model='object' style="width: 100%;" rows="10"></textarea>
            </div>

            <!-- individual object JSON output. Edits to the objects above don't show here. -->
            <div ng-repeat="object in model.objects">
            <pre>{{ object | json }}</pre>
            </div>
        </div>
    </div>

指令：

app.directive('jsonEditor', [ '$filter', function( $filter ) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attr, ngModel) {

            function into(input) {
              try{
                  var parsed = JSON.parse(input);
                  return parsed;
              }
              catch( e )
              {
                  return {};
              }
          }

          function out(data) {

              try {
                  var str = $filter('json')(data);
                  return str;
              }
              catch( e )
              {
                  return '';
              }
          }

          ngModel.$parsers.push(into);
          ngModel.$formatters.push(out);
        }
    };
}]);

Answer 1

你需要一个。在模型中，否则模型值将按值而不是引用复制到新范围中。这是你的plunker，更新。

http://jsfiddle.net/Cjsge/

            <div ng-repeat="object in model.objects" class="well">
                <textarea json-editor ng-model='object.json' style="width: 100%;" rows="10"></textarea>

Answer 2

您是否尝试过使用$ watchCollection？

试试这个：

    scope.$watchCollection('objects',function(newValues, oldValues){

        // do whatever you want to do when an element changes
    });

如果你的数组只有一个深度，这将有效。如果您开始使用嵌套数组，可以尝试这样做：

    scope.$watch('objects',function(newValues,oldValues){/***/},true);

注意深度观察对象时，第三个参数设置为true。

AngularJS未检测到大对象叶节点更改

2 个答案: