为什么上载表单在ng-include内部不起作用?

时间:2019-01-13 22:05:23

标签: angularjs

我在ng-include内显示了一个上传表单,当我不使用ng-include时,它会在ng-model中找到所有文件,但范围似乎在ng-include中丢失了

我已经尝试过在SO上找到的许多答案,例如在目标视图中包含ng-controller或对$ parent而言,没有一个对我有用。

请注意,我所有的视图都加载到index.html的ng-view中,我尝试过: -$ scope。$ parent.csvFile

-$ scope。$ parent。$ parent.csvFile

-将ng-controller =“ mktp-kyc-controller”包含在目标div(具有上载表格)中

这是我的代码:

这是上传表单,我正在ng-include中加载的文件

       <form class="col-md-3" name="htmlUploadForm" class='specialDragForm2'>
                <!--     <input style="max-width:300px" class="form-control" type="file" ngf-select ng-model="csvFile" name="csvFile" ngf-pattern="'.csv'"
                        accept=".csv" ngf-max-size="20MB" /> -->

                        <input class="form-control" type="file" fd-input file-name="fileName" ng-model="csvFile" accept=".csv" ngf-select
                        name="firstFile" ngf-max-size="20MB" required>

             <div>
                    <button class="btn btn-primary" type="submit" ng-click="submit('csvFile')">{{gs("uploadButton", "Upload")}}</button>
                </div>


 </form>

这是ng-include所在的地方

<div class="containter">
    <br />
    <ul class="progress-indicator">
        <button ng-repeat="form in forms" ng-disabled="hasHash(form.hashName) == false && form.state != 'current'" ng-class="form.state"
            ng-click="changeSection(form.name)">
            <span class="bubble"></span>{{gs(form.name, form.name)}} 
        </button>
    </ul>
</div>
<br/>
<br/>



<div ng-include ="selectedView">  </div>

控制器很大,所以我只介绍相关部分,该控制器称为mktp-kyc-controller:

$scope.submit = function () { 

    $scope.upload($scope.$parent.csvFile); //call upload function
}




$scope.upload = function (varName) { 

    let sendData = {
        file: varName
    };
    Upload.upload({
        url: 'http://localhost:4000/mktp/api/kyc/uploadCsv',
        data: sendData
    }).then(function (response) { //upload function returns a promise
        ;
        let resp = $scope.handleApiResponse($scope, response, $timeout);
        if (resp){
            $scope.csvObligorInfo = resp.csvInfo;

            for (let i = 0; i<  $scope.csvObligorInfo.length; i++) {
                var obl = $scope.csvObligorInfo[i];

                var flattenObl = flattenObject(obl);

                $scope.flattenObligorInfo.push(flattenObl)
                delete flattenObl['companyId'];

            }

        }
        $scope.refreshCsvTable();
        $scope.cardDisplayInit();
        $scope.checkForMissingInsurance();
        $scope.tabs.activeTab = 0;
        $scope.updateButtons(true);
    }, function (resp) { //catch error
        console.log('Error status: ' + resp.status);
    }, function (evt) {
        console.log(evt);
        var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
        $scope.progress = 'progress: ' + progressPercentage + '% '; // capture upload progress
        if (evt.config.data.file){
            $scope.fileNameList = evt.config.data.file.name;
        } else if (evt.config.data.files){
            evt.config.data.files.map(function(file){
                $scope.fileNameList += ", " + file.name;
            });
        }
    });
};

我不明白为什么我的所有解决方法都无法正常工作,尝试上传文件时,它总是给我错误(找不到文件),而当我将其放在ng-include之外时,它仍然可以正常工作。我想念什么?

0 个答案:

没有答案