AngularJSで簡単にファイルアップロードをフォームに追加する

Question

私はAngularJSフォームを持っています。そのコンテンツはnodemailerバックエンドに送られます。これは、フォームにファイルアップロードコンポーネントを追加するには、次のディレクティブを使用して、うまく動作します：

.directive('fileModel', ['$parse', function ($parse) { 
    return { 
    restrict: 'A', 
    link: function(scope, element, attrs) { 
     var model = $parse(attrs.fileModel); 
     var modelSetter = model.assign; 

     element.bind('change', function(){ 
     scope.$apply(function(){ 
      modelSetter(scope, element[0].files[0]); 
     }); 
     }); 
    } 
    }; 
}]) 

しかし、私は、ファイルが選択されるまで、[送信]ボタンが無効になっているように、これに検証を追加する必要があります。私は「必要な」標準は、ファイルモデルでは動作しません、と私は正しい手順のない例を見つけることができないことを理解し

<div class='form-group'> 
    <!-- FILE UPLOAD --> 
    <input type="file" file-model="email.attachment" name="attachment" 
    class="form-control" accept="application/pdf, application/msword, text/plain" /> 
    <!-- SUBMIT BUTTON --> 
    <button type='submit' name='submit' class='btn btn-primary' 
    ng-disabled = 'userForm.$invalid' value = 'Send' 
    ng-click = 'uploadFile()'>Submit</button> 
</div> 

：私は、フォームは次のようになります想定しています。 検証を実装するためにディレクティブをどのように変更する必要がありますか？そのため

Answer 1

使用$ rootScope：あなたのメインコントローラで

：

$ rootScope.fileUploaded =偽;あなたのビューで

.directive('fileModel', ['$parse','$rootScope', function ($parse,$rootScope) { 
    return { 
    restrict: 'A', 
    link: function(scope, element, attrs) { 
     var model = $parse(attrs.fileModel); 
     var modelSetter = model.assign; 

     element.bind('change', function(){ 
     scope.$apply(function(){ 
      modelSetter(scope, element[0].files[0]); 
      if(element[0].files[0]){ 
      $rootScope.fileUploaded = true; 
      } 
     }); 
     }); 
    } 
    }; 
}]) 

：

<div class='form-group'> 
    <!-- FILE UPLOAD --> 
    <input type="file" file-model="email.attachment" name="attachment" 
    class="form-control" accept="application/pdf, application/msword, text/plain" /> 
    <!-- SUBMIT BUTTON --> 
    <button type='submit' name='submit' class='btn btn-primary' 
    ng-disabled = '!fileUploaded' value = 'Send' 
    ng-click = 'uploadFile()'>Submit</button> 
</div>