Значение $ scope не обновляется, если в контроллере изменяется значение $ scope

Question

У меня есть функция, которая использует papaparse.js для немедленного получения содержимого файла .csv, выбранного через ввод файла в виде списка объектов JSON, затем я передаю этот список в область $ $, которую я console.log.

Это срабатывает при нажатии кнопки и работает, проблема в том, что представление не может сразу увидеть, что эта область $ была обновлена, пока не произойдет другое действие, такое как повторное нажатие кнопки или нажатие другой кнопки, которая вызываетпустая функция $ 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-щелчке это сработает, немедленно отобразив новое значениекак только кнопка нажата.Но он не работает для данных из CSV, даже если он отображается в консоли.

Answer 1

Попробуйте $scope.$apply(); после строки $scope.dataList = results.data;

Ваша функция Papa.parse выходит за рамки angular, из-за чего любые изменения, сделанные в ее обратном вызове, не фиксируются angular.Поэтому вам нужно вручную запустить новый цикл дайджеста с помощью функции $ scope. $ Apply (), чтобы угловая проверка, если что-то изменилось в его области видимости, и обновление представления.

Прочтите это для получения более подробной информации http://jimhoskins.com/2012/12/17/angularjs-and-apply.html