0

アップロード コンポーネントを作成しようとしていますが、onchange イベントが発生したときにビューが更新されません。file.names がログに記録されていますが、何も起きていません。

パッケージをプロジェクトにドロップしてからファイルアップローダーを有効にしたいので、ディレクティブを使用しています<upload url='/fileserver'></upload>。

コントローラー:

var controllers = {

  UploadCtrl: function ($scope) {

    $scope.images = [];
    $scope.files = [];

    $scope.upload = function (element) {
      $scope.$apply(function ($scope) {
        $scope.files = element.files;
      });
    };

    $scope.$watch('files', function () {

      for (var i = 0; i < $scope.files.length; i += 1) {

        var current = $scope.files[i];
        var reader = new FileReader();

        reader.onload = (function (file) {
          return function (env) {
            console.log(file.name);
            $scope.images.push({ name: file.name, src: env.target.result });
          }
        }(current));

        reader.readAsDataURL(current);
      }

    }, true);

  }

};

ディレクティブ:

var directives = {

  upload: function ($compile) {

    return {
      restrict: 'E',
      link: function (scope, element, attr) {
        scope.url = element.attr('url');
        element.html($compile(template)(scope));
      }
    };

  }

};

テンプレート var (複数行の文字列の原因となる cs ファイルです)

template = """
<div ng-controller='UploadCtrl'>
  <input type='file' multiple onchange='angular.element(this).scope().upload(this)' />

  <div ng-repeat='image in images'>
    {{image.name}}: <img ng-src='{{image.src}}' width='80' height='80' />
  </div>
</div>
"""
4

1 に答える 1

5

イメージを更新するには、 $apply を使用する必要がある場合があります。

$scope.$apply(function () {
    $scope.images.push({ name: file.name, src: env.target.result });
}
于 2012-10-10T16:28:49.853 に答える