json-editor directive not updated when schema changes

[perqa]

The json-editor directive does not update when the schema variable changes. I am basically using the demo example. The json-editor directive is evaluated on page load with ajax-loaded schema. But when I load a new schema on that page, nothing happens. Should not the new schema be rendered by the directive automagically?

In controller, i have $scope.model.schema.
HTML:

<json-editor schema="model.schema" startval="model.startVal" buttons-controller="AsyncButtonsController"> 

[rodikh]

Do you want an option to change the schema after the editor has been rendered?

This looks like it has some complexity to it, as the schema can be either a plain object, or a promise.

If jdorn/json-editor supports changing the schema dynamically, I'll look into adding this functionality to the directive as well.

[perqa]

It would be nice, and more "Angularish" (view-model binding). The other, more clunky, option is to load the same view again with a different parameter in the URL. I am loading schemas dynamically, using $http. The idea was to let the user select different schemas on the page.

[perqa]

I found a simple workaround to achieve a re-rendering of the json-editor directive. Just add an ng-if to the json-editor tag. When switching schema, set model.show to false and then to true again.

HTML:

<json-editor ng-if="model.show" schema="model.schema" startval="model.startVal" buttons-controller="AsyncButtonsController">

[rodikh]

The problem with ng-if is that this is basically a quicker way of removing and re-adding the directive to the dom. which works, but is not the most cost-effective solution.

Go ahead and use the ng-if solution until I implement the "Angularish" solution with watching for schema changes.

[m-unterberger]

@perqa Thanks for the workaround, works fine. I found out that you have to interrupt the executing function between the switching of the model.show flag. I did it like this

$scope.show = false;
 $scope.schemaToUse = newSchema;
 $timeout(function () {
      $scope.show = true;
 }, 0);

[tomerf8]

@m-unterberger

Worked better when

$scope.show = false; $timeout(function () { $scope.schemaToUse = newSchema; $scope.show = true; }, 0);

[cesarvega]

I fixed it like this using promises

var deferred = $q.defer();

var promise = deferred.promise;
var newScheme =promise.then(function(result){
return result;
});
deferred.resolve(JSON.parse(row.newScheme)):
$scope.mySchema=newScheme ;
$scope.myStartVal =newScheme ;

[0xhoang]

I think you can use solution after

var schema = result[0].data || result[0],
startVal = result[1];
if (schema === null) {
throw new Error('json-editor: could not resolve schema data.');
}

$scope.$parent.$watchCollection(function() { return $scope.mySchema; }, function(new,old){
//update newScheme
});

[rodikh]

Thanks a million @devhoanggia!
I used your idea to add support for updating schema via scope a2e6ef2. new version v0.2.1 is up.

[shikshik]

Just updated to new version (We needed that auto-update feature - almost forked myself to do it), seems like the output is broken, It does render the UI but it looks broken (useless select boxes appears). before your update, we used the same schema and got perfectly rendered. I double checked my data and schema, nothing has changed except angular-json-editor version.

Can you please re-check your latest version?
I will keep investigating and update if I've found anything.

[simo3o]

I'm having the same issue, I get the update but the console shows
JSON Editor not ready yet. Listen for 'ready' event before getting the value

[rodikh]

Latest v0.3.0 addresses some of these issues by updating dependencies.
Hopefully this is solved, if not, please reopen.