Question

我有一个函数，它使用papaparse.js立即获取通过文件输入选择的.csv文件的内容作为JSON对象列表，然后我将此列表传递给$ console.log。

这是在单击按钮时触发并且有效，问题是视图无法立即看到此范围已更新，直到另一个操作发生，例如再次单击该按钮，或单击另一个调用空$的按钮范围功能。

HTML视图：

<div ng-controller="myController">        

    <input id="csvfile" type="file" accept=".csv">

    <button type="button" ng-click="readDataList()">
        Preview Data                
    </button>

    {{dataList}}

</div>

.js是

var App = angular.module('App', ["ui.bootstrap"]);

App.controller('myController', function ($scope, $http) {   

    $scope.dataList;

    $scope.readDataList = function ()
    {
        var myfile = $("#csvfile")[0].files[0];
        var json = Papa.parse(myfile,
            {
                header: true,
                skipEmptyLines: true,
                complete: function (results)
                {
                    $scope.dataList = results.data;
                    console.log($scope.dataList);
                }
            });        
    };     

});

单击按钮后，列表将显示在控制台中，但除非我再次按下按钮，否则列表中不会显示该列表。

如果我在控制器中添加以下内容：

$scope.testScope = 'hello';

$scope.changeScope = function () {
    $scope.testScope = 'goodbye';
}

并在视图中显示新的$ scope，并且新的ng-click上的函数会在单击按钮后立即显示新值。但它对csv中的数据不起作用，即使它出现在控制台中。

Answer 1

在$scope.$apply();行

之后尝试$scope.dataList = results.data;

你的Papa.parse函数超出了角度范围，因此在回调中所做的任何更改都不会被角度捕获。因此，您必须使用$ scope。$ apply（）函数手动触发新的摘要周期，以便角度检查其范围内是否有任何更改并更新视图。

阅读本文以获取更多详细信息http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

在控制器中更改$ scope值时，$ scope值不在视图中更新

1 个答案: