修改一个指令不使用jquery api

change a directive not to use jquery api

本文关键字：jquery api 指令 一个 修改      更新时间：2023-09-26

我发现Tosh的一个漂亮的指令，它几乎是我想要的。我不需要清晰的功能，只需要打开文件的详细信息。我正在尝试转换这个，它使用jQuery与angular原生API。我尝试了一下，但是没有用。

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

预览

感谢您的帮助。

谢谢

原文:

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

相关文章：