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