angularjs - 当输入类型为 "file"时，$dirty 无法按预期工作

Question

我对 AngularJS 还很陌生。问题是我有一个包含两个字段的表单 - 名称和个人资料图片，如下面的代码所示。我正在使用 ng-upload ( https://github.com/twilson63/ngUpload )。我希望“保存”按钮仅在任一字段为脏且当前未发生上传时才起作用，以便用户单击“保存”按钮时不会触发多个发布请求。但看起来， $dirty 在“姓名”字段中工作正常，但在“个人资料图片”字段中则不然。我只是错过了什么吗？对于 AngularJS 初学者来说，如何让它尽可能简单。任何帮助将不胜感激。

             //Code
             <form id='picUpload' name='picUpload' ng-upload-before-submit="validate()" method='post' data-ng-upload-loading="submittingForm()" action={{getUrl()}} data-ng-upload='responseCallback(content)' enctype="multipart/form-data">
             <input type="text" name="name" data-ng-model="user.name" maxlength="15" id="user_screen_name" required>
             <input type="file" name="profilePic" data-ng-model="user.profilePic" accept="image/*">
             <div class="form-actions">
        <button type="submit" class="btn primary-btn" id="settings_save" data-ng-disabled="!(picUpload.name.$dirty|| picUpload.profilePic.$dirty) || formUploading">Save changes</button>
    </div>
</form>

             //In my JS code
             $scope.submittingForm = function(){
        $scope.formUploading = true;
             }

问候!

Answer 1

我做了一个指令ng-file-dirty

  .directive('ngFileDirty', function(){
    return {
        require : '^form',
        transclude : true,
        link : function($scope, elm, attrs, formCtrl){
            elm.on('change', function(){
                formCtrl.$setDirty();
                $scope.$apply();
            }); 
        }   
    }   
  })