2016-07-03 3 views
0

ファイル入力を含む指令があります。ファイルの入力が変更されたとき、スコープ変数を更新しようとしましたが、更新されません。コメントアウトされたタイムアウトがコメント解除されると、スコープ変数が更新されます。指示ファイル内の入力ファイルの変更リスナーdoesnt更新スコープ変数[plunker添付]

私は、angle.element .on関数が安全な適用(ダイジェストを引き起こす)をしているという印象を受けました。私はなぜここに別の$タイムアウトを働かせる必要があるのか​​分かりません。

問題は以下のplunkerで再現されました。 https://plnkr.co/edit/dHRInri9i21bR0gxe8q1?p=preview

app.directive('fileInput', function($timeout) { 
    var directive; 

    directive = { 
    restrict: 'E', 
    templateUrl: 'fileinput.html', 
    link: function(scope, element) { 
     element 
     .find('input') 
     .on('change', function(e) { 
      console.log(e); 
      scope.fileName = 'file name--->' + e.target.files[0].name; 
      /*$timeout(function(){ 
      scope.fileSize = 'fileSize--->' + e.target.files[0].size; 
      });*/ 
     }); 
    } 
    }; 

    return directive; 
}); 

ディレクティブテンプレート:

<input type="file" id="fileUpload" accept="image/*" /> 
<br> 
{{fileName}} 
<hr> 
{{fileSize}} 

答えて

1

element.onのいずれかであるjqLit​​eかのjQueryを使用して。 https://plnkr.co/edit/hohU97QmjASwat139sEV?p=preview

+0

ありがとう:element.onはAngularJs意識

plunkerないようにscope.$applyを使用すると、この場合に有効です。 jqLit​​eのangular.element.onに関する私の理解は間違っています。あなたがスコープと言ったように、すでに適用されていない場合は$ applyが有効です。 –

関連する問題