AngularDart：文件输入模型指令答案

【问题标题】：AngularDart: file input model directiveAngularDart：文件输入模型指令
【发布时间】：2014-07-16 01:52:58
【问题描述】：

我正在尝试制作一个类似于 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);
      });
    }
  }

有什么建议吗？

【问题讨论】：

曾尝试实现此github.com/angular/angular.dart/issues/1094（仅供讨论）
什么不起作用？您是否收到一些错误消息，或者您根本没有应用装饰器？当我查看github.com/angular/angular.dart/blob/… 时，它看起来有点不同。
是的，它看起来确实很不一样，这就是为什么我花了很长时间才理解它来编写我所做的代码。但我不知道如何继续。你如何提醒回调函数，例如file-model="cmp.filesAdded(files)" 或更新变量，例如文件模型=“cmp.files”。我个人认为回调更好，但不知道如何实现。我代码中的“表达式”变量将回调函数保存为字符串，但我不知道如何计算它。

标签： dart angular-dart

【解决方案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)">

【讨论】：

【解决方案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);
    }
}

【讨论】：