Обновление представления после чтения данных из файла в 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. Как я могу обновить это представление?

javascript html angularjs

0

rishi007bansod 23 Окт 2018 в 15:53

Answer 1

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

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

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

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

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

1

Pop-A-Stash 23 Окт 2018 в 15:03

Answer 2

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

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

2

Eduardo Yáñez Parareda 23 Окт 2018 в 15:02

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

2 ответа

Похожие вопросы

Новые вопросы

javascript