Question

上传文件后表单不清晰。

  <div class="aboutFile">
     <input type="file" name="file" fileread="vm.file" class="form-control" ng-model="vm.file">
        <div class="create-component--perma-bg">
            <i class="fa fa-plus-square-o" aria-hidden="true"></i>
            <span ng-if="!vm.file.name">Add File </span>
            <span ng-if="vm.file.name">{{vm.file.name}}</span>
        </div>
          <button type="button" class="btn btn-info bgChangeBtnInfo" ng-
           click="vm.upload(vm.file)" ng-disabled="!vm.file"> Upload</button>
       </div>

vm.upload方法调用。

    vm.upload = (fileObj) =>{
        vm.call("saveSlideFile", vm.slideObject, (error, result) => {
          if (!error) {
           vm.file={};
           console.log('File saved successfully');
          }
       })
  }

fileread指令

angular.module('livePoll')
    .directive("fileread", [function () {
        return {
            scope: {
                fileread: "="
            },
            link: function(scope,element, attributes){
                $('.button-collapse').sideNav();
                element.bind("change", function (event) {
                    scope.$apply(function () {
                        scope.fileread = event.target.files[0];
                        scope.$parent.fileread = scope.fileread;
                    });
                })
            }};
    }]

Answer 1

1）避免使用scope.$parent.fileread = scope.fileread;这个code smells，因为您使用=绑定并且可能导致不可预测的行为，所以没有任何意义。

2）如果您使用的是ngModel，则可以避免在指令中使用绑定，并使用NgModelController.$setViewValue更新视图值，如：

function onChange (event) {
  //update bindings in $apply block
  $scope.$apply(function(){
    ngModel.$setViewValue(event.target.files[0]);
  });
}
//change event handler
element.on('change', onChange);

3）您可以在指令中的$watch上设置NgModelController.$viewValue，并在父级更改值时清除输入字段：

//set up a $watch for the ngModel.$viewValue
$scope.$watch(function () {
  return ngModel.$viewValue;
}, function (value) {
  //clear input value if model was cleared
  if (!value) {
    element.val("");
  }
});

Answer 2

我在惊人的Tech网站Technoalerts的帮助下，只用一行代码解决了这个问题。谢谢大家的帮助，我将与大家分享这些信息。

只需按照以下步骤操作： -

在输入表单中，我们必须指定id。

 <input type="file" name="file" fileread="vm.file" class="form-control" id="inputFile" ng-model="vm.file">

在调用vm.upload方法的地方，我在执行任何操作后使用$('#inputFile').val('');清除表单字段。

vm.upload

 vm.upload = (fileObj) =>{
    vm.call("saveSlideFile", vm.slideObject, (error, result) => {
      if (!error) {
       $('#inputFile')
       vm.file={};
       console.log('File saved successfully');
      }
   })
}

如何在angularjs上的s3存储桶上传文件后清除表单输入？

2 个答案: