爲什麼data-ng-file-select不起作用？

Question

我想上傳一個文件。我有一個工作的例子確實是這樣的：

<div class="btn btn-default btn-fileinput"> 
    <span class="glyphicon glyphicon-upload"></span> <input 
     type="file" id="fileUploadInput" name="files" multiple 
     accept="text/xml" data-ng-file-select="uploadFiles($files)" style="width: 40px;"> 
</div> 

我修改了一下，這個想出了：

<label class="btn btn-default btn-file"> 
    Upload 
    <input 
     type="file" 
     style="display: none;" 
     name="files"   
     multiple       
     data-ng-file-select="uploadModel($files)" 
     > 
</label> 

<span data-ng-file-select="uploadModel($files)" class="btn btn-primary btn-lg" role="button">Test</span> 

然而，uploadModel()功能是沒有得到所謂：

$scope.uploadModel = function($files) { 
    alert('Uploading ' + $files); 
} 

如何使這項工作上傳文件？

---

依賴關係：

<!-- Dependencies --> 
    <script src="bower_components/jquery/dist/jquery.min.js"></script> 

    <script src="bower_components/angular/angular.min.js"></script> 
    <script src="bower_components/angular-file-upload/dist/angular-file-upload.min.js"></script> 
    <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script> 

應用modeule：

var emaApp = angular.module('emaApp', ['ui.bootstrap', 'angularFileUpload']); 

Answer 1

如果是以下module，那麼你應該使用nv-file-select而不是data-ng-file-select結合的上傳對象。 nv-file-select看起來沒有采取任何形式的函數/回調，而是使用附加到上傳器對象的各種掛鉤，例如onAfterAddingFile，它允許您在選擇/上載過程中的不同位置執行操作。看看他們的API documentation似乎沒有任何data-ng-file-select指令，除非你創建了一個自定義指令。

否則，您可以創建自定義指令來監視文件輸入類型字段的更改，如this。

HTML

<label class="btn btn-default btn-file"> 
    Upload 
    <input 
     type="file" 
     style="display: none;" 
     name="files"   
     multiple       
     nv-file-select 
     uploader="uploader" /> 
</label> 

JS

app.controller('someController', function($scope, FileUploader) { 
    var uploader = $scope.uploader = new FileUploader({ 
     url: 'some/end/point' 
    }); 

    uploader.onAfterAddingFile = function($files) { 
     console.info('onAfterAddingFile', $files); 
    }; 
});