当输入类型为"file"时,$ dirty无法正常工作

Question

对AngularJS来说还是一个新手.问题是我有一个带有两个字段的表单 - 名称和个人资料照片,如下面的代码所示.我正在使用ng-upload(https://github.com/twilson63/ngUpload).我希望"保存"按钮仅在任一字段为脏并且当前未发生上载时才起作用,以便在用户单击"保存"按钮时不会触发多个帖子请求.但看起来,$ dirty在'name'字段中工作得很好,但在'profile pic'字段中却没有.我只是缺少一些东西吗？如何为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();
            }); 
        }   
    }   
  })