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

Question

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

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

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.dataList = results.data;行之后尝试$scope.$apply();

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

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