Angularjs 文件名不为'；t在表单后清除。$setPristine用于文件上载的自定义角度指令

我使用的是

angular 1.5.8

。在遵循一些资源之后，我让文件上传工作正常。我必须为此创建一个自定义指令

指令

//file-upload-model-directive.js
'use strict';

export default function (app) {

    app.directive('fileUploadModel', fileUploadModelDirective);

    function fileUploadModelDirective () {
        'ngInject';

        return {
            restrict: 'A',
            link: linkFn,
            require: 'ngModel'
        };

        function linkFn (scope, element, attrs, ngModel) {
          element.bind('change', function(event){
            var files = event.target.files;
            var file = files[0];

            ngModel.$setViewValue(file);
            scope.$apply();
          });

        }
    }
}

我还使用angular的

表单

。我在这张表格上有一个“重置”按钮。我想在单击时清除所有表单字段。除了

文件

之外，所有表单字段都会发生这种情况

查看

<form ng-submit="dataCtrl.upload(form)" name="form">
  <div class="form-group" ng-class="{'has-error' : form.file.$invalid && !form.file.$pristine}">
    <label>Select file</label>
    <input type="file" name="file" ng-model="dataCtrl.newUpload.csvFile" file-upload-model required/>
  </div>

  <div class="form-group" ng-class="{'has-error' : form.comment.$invalid && !form.comment.$pristine}">
    <label>Comment</label>
    <textarea class="form-control" name="comment"
      ng-model="dataCtrl.newUpload.comment" required></textarea>
  </div>

  <div class="form-group pull-right">
    <button type="submit" class="btn btn-success" ng-disabled="form.$invalid">Upload</button>
    <button class="btn btn-default" ng-click="dataCtrl.reset(form)" ng-disabled="!form.$dirty">Reset</button>
  </div>
</form>

单击“重置”时，我看到

form.file.$pristine is false
form.file.$invalid is false

但我仍然在文件上传元素附近看到文件名

我还尝试在指令中的元素上添加监视和处理事件

scope.$watch(attrs.fileUploadModel, function(value) {
  console.log('attrs.file');
});

element.on('$pristine', function() {
  console.log('destroy');
});

但他们没有被调用

---

我该怎么做？请指导我。

为什么不使用输入标签而不是按钮标签呢。从理论上讲，这可能是可行的

<input type="submit" class="btn btn-success" ng-disabled="form.$invalid" value="Upload">
<input type="reset" class="btn btn-default" ng-click="dataCtrl.reset(form)" ng-disabled="!form.$dirty" value="Reset">

---

当您清除

newUpload

时，文件输入不会被清除。您需要单独执行此操作

见：

基本上，我在指令

范围中添加了以下内容：

scope: {
  model: '=ngModel'
},

。。。和
监视
：

scope.$watch('model', function(file) {
  if (!file) {
    element.val('');
  }
});

工作得很好！我想知道我的美元表怎么了。比方说，如果我正在观看attrs
attrs.fileUploadModel
只引用
input
元素中的
fileupload model
属性。它始终为空字符串。这将清除文件名。但重置不会将表单设置为true。$invalid。所以，即使我的表单被重置，上传按钮仍然处于活动状态。
scope.$watch('model', function(file) {
  if (!file) {
    element.val('');
  }
});