bugfix> javascript > 投稿

papaparse.jsを使用して、ファイル入力で選択した.csvファイルのコンテンツをJSONオブジェクトリストとしてすぐに取得する関数があり、このリストをconsole.logの$scopeに渡します。

これはボタンのクリックでトリガーされ、機能します。問題は、ボタンを再度クリックするか、空の$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からのデータに対しては機能しません。

回答 1 件
  • $scope.$apply(); を試す  行 $scope.dataList = results.data; の後

    Papa.parse関数は、角度の範囲外です。そのため、コールバックで行われた変更は、角度によってキャプチャされません。したがって、角度がスコープ内で何かが変更されたかどうかを角度チェックしてビューを更新できるように、$scope。$apply()関数を使用して新しいダイジェストサイクルを手動でトリガーする必要があります。

    詳細についてはこちらをお読みくださいhttp://jimhoskins.com/2012/12/17/angularjs-and-apply.html

あなたの答え