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();
            }); 
        }   
    }   
  })

Answer 2

之前我没有使用过ng-upload，但你可以使用输入元素的onchange事件。只要用户选择文件，就会触发onchange事件。

<input type="file" onchange="angular.element(this).scope().fileNameChanged(this)" />

Javascript：

var app = angular.module('MainApp', []);
  app.controller('MainCtrl', function($scope)
  {
    $scope.inputContainsFile = false;
    $scope.fileNameChanged = function(element)
    {
        if(element.files.length > 0)
          $scope.inputContainsFile = true;
        else
          $scope.inputContainsFile = false;
    }

  });

现在，您可以检查inputContainsFile变量是否为真以及名称字段的脏检查

当输入类型为“file”时，$ dirty无法正常工作

2 个答案: