Question

我正在尝试制作类似于ng-model的指令来处理文件输入。我是AngularDart的新手，所以不知道该怎么做。

以下是我通过查看ng-model源文件来编写的一些代码，但它（显然）不起作用。

  @Decorator(
      selector: 'input[type=file][file-model]',
      map: const {'file-model': '&filesSelected'})
  class FileModel {
    final InputElement inputElement;
    String expression;
    final Scope scope;
    String _inputType;
    List<File> files;
    var filesSelected;

    FileModel(this.inputElement, this.scope, NodeAttrs attrs) {

      expression = attrs["file-model"];

      inputElement.onChange.listen((event) {
        files = inputElement.files;
        filesSelected(files);
      });
    }
  }

有什么建议吗？

Answer 1

我已经开始工作了。

@Decorator(
    selector: 'input[type=file][file-model]',
    map: const {'file-model': '&filesSelected'})
class FileModel {
  Element inputElement;
  String expression;
  final Scope scope;
  String _inputType;
  List<File> files;
  var listeners = {};

  FileModel(this.inputElement, this.scope) {
  }

  initListener(var stream, var handler) {
    int key = stream.hashCode;
    if (!listeners.containsKey(key)) {
      listeners[key] = handler;
      stream.listen((event) => handler({r"files": (inputElement as InputElement).files}));
    }
  }

  set filesSelected(value)  =>  initListener(inputElement.onChange, value);
}

Usage: <input type="file" multiple file-model="cmp.filesSelected(files)">

Answer 2

要在更改事件中获取文件，您也可以通过$event.target.files传递它们。例如：

import 'package:angular2/core.dart';

@Component(
    selector: 'my-app', 
    template: r'''
        <h1>{{title}}</h1>
        <input class="btn" type="file" (change)="onFileUpload($event.target.files)">
    ''')
class AppComponent {
    String title = 'File transfer';

    onFileUpload(List<File> files) {
        if (files == null) return;
        // read file content as dataURL
        final File file = files[0];
        final FileReader reader = new FileReader();
        reader.onLoad.listen((_) {
            print(reader.result);
        });
        reader.readAsDataUrl(file);
    }
}

AngularDart：文件输入模型指令

2 个答案: