Обновление представления после чтения данных из файла в JavaScript

Question

Я пытаюсь запустить jsfiddle на https://jsfiddle.net/rishi007bansod/f7903drg/160/. В этом java-сценарии я беру данные из json файла, содержащего запись json.Например, файл содержит следующую запись:

{
    "a":5,
    "b":2,
    "f": 
    {
        "c":"test",
        "d":"test_json"
    }
}

После прочтения файла я пытаюсь напечатать json структуру дерева записей и назначить кнопки Add Node и Delete Node для каждой записи, чтобы разрешить добавление или удаление узлов,

В коде я инициализировал $scope.tree переменную значением $scope.tree = [{name: "myTree", nodes: []}];.Затем я пытаюсь присвоить древовидную структуру переменной $scope.tree после чтения данных из файла.Но переменная $scope.tree не обновляется (ее значение остается тем же, что мы инициализировали).Таким образом, представление html не обновляется с этим деревом после чтения данных из файла json.Как я могу обновить это представление?

Answer 1

Проблема в том, что ваша функция для чтения в данных файла является асинхронной, но она не уведомляет AngularJS о завершении.

document.getElementById('files').addEventListener('change', handleFileSelect, false);

Только угловые провайдеры "синхронизируются" с циклом дайджеста AngularJS ($q, $http, $timeout и т. Д.).Но обычные события старого документа не являются и должны сделать дополнительный шаг, чтобы указать AngularJS, что ему нужно запустить другой цикл.

 $scope.$apply(function() {
   $scope.tree = myTree;
 });

Рабочий пример: https://jsfiddle.net/f7903drg/161/

Answer 2

Итак, вы обновляете переменную $scope.tree вне области жизненного цикла Angular, поэтому вам нужно вызвать $scope.apply в функции handleFileSelect, только в конце или после присвоения значения.

Проблема с полями ввода типа file заключается в том, что для добавления onChange необходимо написать пользовательскую директиву, поскольку ng-change не поддерживается для этих полей.