CODEWITHSUNDEEP
angularjs
SoftTimur
SoftTimur

Reputation: 5540

A bug in a JSON editor by AngularJS

I want to use this JSON editor, but I have found a bug: JUST after loading the web page, if we modify a value of a field in the treeview (resp., textarea), the value in the textarea (resp., treeview) will change automatically, which is great. However, after loading the web page, if we modify first a value in the treeview (eg, Miller to Miller 1), then modify the value of the SAME field in the textarea (eg, Miller 1 to Miller 2), the value in the treeview will NOT be changed automatically (ie, it is still Miller 1).

I tried to make a shorter JSBin, which has the same bug. I think the bug probably comes from the AngularJS part:

<!DOCTYPE html>
<html ng-app="JSONedit">
<head>

  <script src="https://rawgit.com/mb21/JSONedit/gh-pages/bower_components/jquery/dist/jquery.min.js"></script>
  <script src="https://rawgit.com/mb21/JSONedit/gh-pages/bower_components/jquery-ui/jquery-ui.min.js"></script>
  <script src="https://rawgit.com/mb21/JSONedit/gh-pages/bower_components/angular/angular.min.js"></script>
  <script src="https://rawgit.com/mb21/JSONedit/gh-pages/bower_components/angular-ui-sortable/sortable.min.js"></script>
  <link href="https://rawgit.com/mb21/JSONedit/gh-pages/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <link href="https://rawgit.com/mb21/JSONedit/gh-pages/css/styles.css" rel="stylesheet" type="text/css" />

  <script src="https://rawgit.com/mb21/JSONedit/gh-pages/js/directives.js"></script>
</head>
<body>  
  <script>
    'use strict';

    var app = angular.module('exampleApp', ['JSONedit']);

    function MainViewCtrl($scope, $filter) {
        $scope.jsonData = { Name: "Joe" };

        $scope.$watch('jsonData', function(json) {
            $scope.jsonString = $filter('json')(json);
        }, true);
        $scope.$watch('jsonString', function(json) {
            try {
                $scope.jsonData = JSON.parse(json);
                $scope.wellFormed = true;
            } catch(e) {
                $scope.wellFormed = false;
            }
        }, true);
    }
  </script>
  <div id="mainView" ng-controller="MainViewCtrl">
    <div class="jsonView">
      <json child="jsonData" default-collapsed="false" type="object"></json>
    </div>

    <hr>
    <div>
      <textarea id="jsonTextarea" ng-model="jsonString"></textarea>
      <span class="red" ng-if="!wellFormed">JSON not well-formed!</span>
    </div>
  </div>
</body>
</html>

Does anyone know what's wrong there?

Upvotes: 1

Views: 464

Answers (1)

sbedulin
sbedulin

Reputation: 4360

This is a JSONedit bug, just submitted a merge request.

Reason is that "child" binding updates may not propagate to ng-repeat. Using parent scope reference fixes this (simpler example here Angularjs ng-model inside ng-repeat via (key,val) not updating)

Relevant code:

<span ng-repeat="(key, val) in child">
  ...
  <input type="text" ng-model="child[key]"

As a temporary fix, you may embed the whole script to your page, working example here

Upvotes: 3

Related Questions