無効にangularjsは

Question

私はこのディレクティブでは、スコープにファイルをバインドするカスタムディレクティブを持って

<div class="form-group"> 
    <input type="file" id="files" file-upload="myFile" ng-disabled="isBig" class="form-control" name="files" /> 
    <output id="list"></output> 
</div> 
<button type="submit" ng-disabled="isBig" class="btn btn-danger btn-block" ng-click="createUser()">Submit</button> 

フォームは、私がイメージオブジェクトを作成し、オンロードの方法を持っている送信ボタンを形成しますファイルサイズを確認してください。ファイルサイズが指定した制限を超えている場合は、ファイルの選択を解除し、フォーム送信ボタンを無効にして、小さいサイズの画像を選択するよう警告します。私は大きさが大きければ、onloadメソッドのスコーププロパティをtrueに設定しようとしましたが、それは動作しません。

app.directive('fileUpload', ['$parse', 
    function($parse) { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
     var model = $parse(attrs.fileUpload); 
     var modelSetter = model.assign; 
     element.bind('change', function() { 
      scope.$apply(function() { 
      if (element[0].files.length > 1) { 
       modelSetter(scope, element[0].files); 
      } else { 
       modelSetter(scope, element[0].files[0]); 
       var file = element[0].files[0]; 
       if (file) { 
       var img = new Image(); 

       img.src = window.URL.createObjectURL(file); 

       img.onload = function() { 
        var width = img.naturalWidth, 
        height = img.naturalHeight; 

        window.URL.revokeObjectURL(img.src); 
        var isBig = false; 

        if (width <= 200 && height <= 200) { 

        modelSetter(scope, isBig); 
        } else { 
        isBig = true; 
        modelSetter(scope, isBig); 
        } 
       }; 
       } 
      } 
      }); 
     }); 
     } 
    }; 
    } 
]); 

私が間違っている箇所についての説明はありません。

Answer 1

クリックイベントハンドラであるため、ボタンが無効になっているとng-clickが発生します。 ng-disabledはフォームの送信を停止しますので、ボタンのng-click = "createUser（）"を取り除き、フォームにng-submit = "createUser（）"を入れてください。

また、ng-submit = "formName。$ valid & & createUser（）"をフォームの検証に使用し、フォームを招待するフォームフィールドで検証することもできます。

image.onload関数もスコープダイジェストの外で起動します。そのため、コールバック関数の中に別のapplyをラップする必要があります。

Answer 2

解決策が見つかりました。エイドリアンの助言は私を助けました。私は誰かがそれを必要とする場合に備えてコードを掲示します。私はng-modelをディレクティブに追加し、ビューの値を設定し、イメージのサイズが必要なものに合っているかどうかをレンダリングしました。入力フォームにも必須です。

//directive to set uploaded img file to the scope element 
    app.directive('fileUpload', ['$parse', 
     function ($parse) { 
     return { 
      require: 'ngModel', 
      restrict: 'A', 
      link: function(scope, element, attrs,ngModel) { 
      var model = $parse(attrs.fileUpload); 
      var modelSetter = model.assign; 

      element.bind('change', function(){ 

       scope.$apply(function(){ 
       if (element[0].files.length > 1) { 
        modelSetter(scope, element[0].files); 
       } 
       else { 
        modelSetter(scope, element[0].files[0]); 
        var file = element[0].files[0]; 
        if(file) { 
        var img = new Image(); 

        img.src = window.URL.createObjectURL(file); 

        img.onload = function() { 
         var width = img.naturalWidth, 
         height = img.naturalHeight; 

         window.URL.revokeObjectURL(img.src); 


         if(width <=200 && height <=200) { 

         ngModel.$setViewValue(element.val()); 
         ngModel.$render(); 
         } 
         else { 
         //fail 
         } 
        }; 
        } 
        else{ 
        ngModel.$setViewValue(element.val()); 
         ngModel.$render(); 
        } 
       } 
       }); 
      }); 

      } 
     }; 
     } 
     ]) 

と、これは、フォーム入力である：

<form name ="addForm" ng-submit="createUser()" novalidate> 

<div class="form-group"> 
          <input type="file" id="files" ng-model="filename" required file-upload="myFile" class="form-control" name="files" accept="image/*"/> 
          <output id="list"></output> 
         </div> 

         <!-- Submit button. Note that its tied to createUser() function from addCtrl. Also note ng-disabled logic which prevents early submits. --> 
      <button type="submit" ng-disabled="addForm.$invalid" class="btn btn-danger btn-block">Submit</button> 
        </form>