anglejsを使用して入力ファイルにコントロールを追加する方法は？

Question

HTMLコードの属性requiredを使用せずに、angularjsを使用してタイプファイルの入力を要求したいとします。 私のインターフェイスは：enter image description here

ボタンsubmitを押すと警告を受け取りたいです。

これは私がやっていることです：enter image description here

function DatabaseCtrl($scope, $http, predefineds, locationSearch, queries, database, $window) { 
var credentials = { 
fileName: "" 
}; 
$scope.credentials = credentials; 
$scope.uploadToFolder = function() { 
    if($scope.credentials.fileName.length<1) { 
     $window.alert("Please select a file!"); 
     return false; 
    } 
    database.uploadToFolder($scope.credentials.fileName, true); 
}; 

HTMLコード：

 <form role="form" name="frmUploadFolder" ng-submit="uploadToFolder()"> 
    <div class="box"> 
     <h2> 
      <span ng-show="isUserFile">File directory browser :</span> 
      <button type="button" ng-show="isUserFile" class="btn btn-default">See file(s)</button> 
      <button type="button" ng-show="!isUserFile" class="btn btn-default">Upload file(s)</button> 
     </h2> 
     <div class="content"> 
      <p> 
       <label ng-show="isUserFile" >Please specify a file, or a set of files:</label><br> 
       <input type="file" ng-show="isUserFile" name="datafile" id="fileName" ng-model="credentials.fileName" size="20" required multiple> 
       <button type="submit" ng-show="isUserFile" class="btn btn-default" >Upload</button><br> 
      </p> 

     <div ui-if="!tree.length" class="message"> 
      <p ui-if="!tree.loading"> 
       <span ng-show="!isUserFile">Empty directory</span> 
      </p> 
     </div> 
     </div> 
    </div> 
</form> 

サービスJS：

angular.module('referl.services').factory('database', function($http, channel, $rootScope) { 
var database = { 
    uploadToFolder: function(fileName, navigateOnSuccess) { 
     var parameters = { 
      fileName: fileName 

     }; 
     $http.get("api/database/uploadToFolder", {params: parameters}) 
      .success(function(response) { 
       if(response.error) { 
        alert(response.error); 
       } else { 
        if (navigateOnSuccess) { 
         alert("Navigation On Success !"); 
        } 
       } 
      }); 

    } 

}; 

すべてのヘルプしてくださいましたか？

Answer 1

角度は、ファイル要素へのモデル要素の結合を完全にサポートしていません。ディレクティブアプローチは一般的に受け入れられる回避策ですが、コントローラ内ではdocument.getElementById（ "filename"）を使用してファイル名入力への参照を取得し、その値を取得することもできます。