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

Question

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

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

网页视图：

<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(( 函数手动触发新的摘要循环，以便角度检查其范围内是否有任何更改并更新视图。

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

Answer 2

我可以使用$rootScope来解决问题，我已经使用了$rootScope并且该值正在自动更新视图(HTML模板(。

控制器：

$rootScope.myVariable = 'update label'

现在，如果您通过任何点击/更改事件更新myVariable的值，则更新的值将在 HTML 模板中更新。

文件：

<h3>{{myVariable}}</h3>