javascript - jquery api を使用しないようにディレクティブを変更する

Question

Toshによる美しいディレクティブを見つけました。これは、私が望むほとんどのことを行います。明確な機能はわかりませんが、開かれたファイルの詳細を取得するだけです。これを変換しようとしていますが、これは角度のあるネイティブ API で jQuery を使用します。私の試みはここにありますが、うまくいきません。

http://plnkr.co/edit/I5x3DH?p=preview

どんな助けでも感謝します。

ありがとう

Answer 1

オリジナル：

app.directive('fileSelect', function() {
  var template = '<input type="file" name="files"/>';
  return function( scope, elem, attrs ) {
    var selector = $( template );
    elem.append(selector);
    selector.bind('change', function( event ) {
      scope.$apply(function() {
        scope[ attrs.fileSelect ] = event.originalEvent.target.files;
      });
    });
    scope.$watch(attrs.fileSelect, function(file) {
      selector.val(file);
    });
  };
});

完全な jQuery の必要性を取り除き、いくつかのAngular ディレクティブ機能(テンプレートと双方向のスコープ変数バインディング) を利用しました。

app.directive('fileSelect', function() {
  return {
    template:'<input type="file" name="files"/>',
    scope:{fileSelect:'='},
    link:function(scope,el,attrs){
      el.bind('change', function( event ) {
      scope.$apply(function() {
        scope.fileSelect = event.target.files;
      });
    });
    }
  }
});

新しいplnkr: http://plnkr.co/edit/F72iTY