Question

我正在尝试在https://jsfiddle.net/rishi007bansod/f7903drg/160/上运行jsfiddle。在此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变量没有得到更新（其值与我们初始化的值相同）。因此，从json文件读取数据后，html视图不会使用此树进行更新。如何更新此视图？

Answer 1

好吧，您正在更新Angular生命周期范围之外的$scope.tree变量，因此您需要在$scope.apply函数中，在结束时或在分配了{值。

类型为handleFileSelect的输入字段的问题在于，要添加onChange，您需要编写自定义指令，因为这些字段不支持ng-change。

Answer 2

问题在于，您读取文件数据的函数是异步的，但没有通知AngularJS它已完成。

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

仅角度提供者与AngularJS摘要周期（$q，$http，$timeout等）“同步”。但是，普通的旧文档事件不是，并且必须采取额外的步骤来通知AngularJS它需要运行另一个周期。

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

工作示例：https://jsfiddle.net/f7903drg/161/

从JavaScript中的文件读取数据后更新视图

2 个答案: