AngularJS 无法显示上传文件日志

Question

我正在尝试使用 angularjs 创建一个文件上传功能，它只接受文件并将其发送到服务器端 (Django)。为了确保文件上传功能正常工作，我在多个位置放置了多个console.log。但是，显示 none 的日志。这是我的代码：

.html:

<body ng-app="myApp" ng-controller="appCtrl">
     <input type="file" id="file" name="files" accept="text/*" 
            data-url="file" class="inputfile_upload"
            ng-model="uploadedFile"/>
     <label for="file"> <span id="chooseFile"></span>Upload a file!</label>
     <button id="submitBtn" type="submit" ng-click="upload()"
             ng-model="uploadBtn">Upload</button>
</body>

directive.js:

app.directive("appDirective", function() {
    return {
       restrict: 'A',
       link: function(scope, element, attrs) {
          var model = $parse(attrs.appDirective);
          var modelSetter = model.assign;
          element.bind('change', function() {
             scope.$apply(function() {
                modelSetter(scope, element[0].files[0]);
             });
          });
       }
    };
});

controller.js:

var app = angular.module('myApp', [])
app.controller('appCtrl', function ($scope, $rootScope, $http, fileUploadService){
    $scope.$watch('uploadBtn', function (newVal, oldVal) {
        var submitBtn = document.getElementById('submitBtn');    
        $scope.upload = function() { 
            if(newVal == true){
                $scope.upload = function() { 
                   var file = $scope.uploadedFile; 
                   console.log('file is ' );
                   console.dir(file);
                   var uploadUrl = "/file";
                   fileUploadService.uploadFileToUrl(file, uploadUrl);
                   $http({
                     method:'GET'
                   })
                   .success(function(data) {
                     console.log("success");
                   })
                   .error(function(data){
                     console.log("failed");
                   })
               };
            }
        }
    )}

Service.js:

app.factory('fileUploadService', function ($rootScope, $http) {
   var service = {};
   service.uploadFileToUrl = function upload(file, uploadUrl){
        var fd = new FormData();
        fd.append('file', file);
        $http.post(uploadUrl, fd, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        })
        .success(function(){
        console.log("Files added");
        })
        .error(function(){
        console.log("Files not successfully added");
        });
    }
    return service;
});

Answer 1

ng-model 指令不适用于 <button> 元素：

 <button id="submitBtn" type="submit" ng-click="upload()"
         ̶n̶g̶-̶m̶o̶d̶e̶l̶=̶"̶u̶p̶l̶o̶a̶d̶B̶t̶n̶"̶ >Upload</button>

只需将函数分配给$scope.upload:

var app = angular.module('myApp', [])
app.controller('appCtrl', function ($scope, $rootScope, $http, fileUploadService){
    ̶$̶s̶c̶o̶p̶e̶.̶$̶w̶a̶t̶c̶h̶(̶'̶u̶p̶l̶o̶a̶d̶B̶t̶n̶'̶,̶ ̶f̶u̶n̶c̶t̶i̶o̶n̶ ̶(̶n̶e̶w̶V̶a̶l̶,̶ ̶o̶l̶d̶V̶a̶l̶)̶ ̶{̶ 
        ̶v̶a̶r̶ ̶s̶u̶b̶m̶i̶t̶B̶t̶n̶ ̶=̶ ̶d̶o̶c̶u̶m̶e̶n̶t̶.̶g̶e̶t̶E̶l̶e̶m̶e̶n̶t̶B̶y̶I̶d̶(̶'̶s̶u̶b̶m̶i̶t̶B̶t̶n̶'̶)̶;̶
        ̶$̶s̶c̶o̶p̶e̶.̶u̶p̶l̶o̶a̶d̶ ̶=̶ ̶f̶u̶n̶c̶t̶i̶o̶n̶(̶)̶ ̶{̶
            ̶i̶f̶(̶n̶e̶w̶V̶a̶l̶ ̶=̶=̶ ̶t̶r̶u̶e̶)̶{̶
                $scope.upload = function() { 
                   var file = $scope.uploadedFile; 
                   console.log('file is ' );
                   console.dir(file);
                   //...
                };
    //...
})

console.log 语句将在单击按钮时显示。

AngularJS 无法显示上传文件日志

AngularJS Unable to display upload file logs

angularjs

angularjs-directive

angularjs-service

angularjs-controller

angularjs-fileupload