0

<input type="file">要素からファイル アップロード ファクトリにファイル名を送信する AngularJS ディレクティブを作成しようとしています。この作品は、次のブログ投稿に基づいています。

http://odetocode.com/blogs/scott/archive/2013/07/05/a-file-input-directive-for-angularjs.aspx

HTML 要素が定義されています。

<div file-input="file" on-change="readFile()"></div>

関連するディレクティブを設定すると:

myApp.directive('fileInput', function ($parse)
{
    return {
        restrict: "A",
        template: "<input type='file' />",
        replace: true,
        link: function (scope, element, attrs) {
            var model = $parse(attrs.fileInput);
            var onChange = $parse(attrs.onChange);

            element.bind('change', function () {
                model.assign(scope, element[0].files[0]);
                console.log(element[0].files[0]);  // correctly references selected file
                scope.$apply();
                console.log(model(scope));  // correctly references selected file
                onChange(scope);
            });
        }
    };
});

要素からファイルを選択すると、changeイベントが発生し、両方のconsole.log呼び出しで、選択したファイルへの参照が出力されます。しかし、コントローラーで印刷しようとすると$scope.file、ファイルの選択が反映されません。

$scope.file = "nothing";

$scope.readFile = function()
{
    $scope.progress = 0;

    console.log($scope.file);  // print "nothing"

    fileReaderFactory.readAsDataUrl($scope.file, $scope)
        .then(function (result) {
            $scope.imageSrc = result;
        });
};

コントローラーがディレクティブから送信された値を適切に設定および保持できない原因は何ですか?

アップデート

次の更新を行いましたが、スコープ変数がまだ更新されていません。私の変更関数が呼び出されましたが、 に与えられた新しい値に気づきませんmyModel。

HTML:

<file-input my-model="fileRef" my-change="readFile()"></file-input>

ディレクティブ (タグをテスト目的でinput更新):text

myApp.directive('fileInput', function ($parse)
{
    return {
        restrict: "AE",
        template: "<input type='text' />",
        replace: true,
        scope: {
            myModel: "=",
            myChange: "&"
        },
        link: function (scope, element, attrs) {
            element.bind('change', function () {
                scope.myChange();
            });
        }
    };
});

コントローラ：

$scope.fileRef = "nothing";

$scope.readFile = function()
{
    $scope.progress = 0;

    console.log($scope.fileRef);  // prints "nothing"

    fileReaderFactory.readAsDataUrl($scope.fileRef, $scope)
        .then(function (result) {
            $scope.imageSrc = result;
        });
};
4

2 に答える 2

1

リンク機能にファイルを追加してみてください。私は同じ問題を抱えていましたが、それが私にとってそれを修正したものです。

私が知る限り、リンクはテンプレートのコントローラー (スコープ) として機能します。

ただし、私を混乱させる 1 つのことは、コントローラーの $scope メソッド内から $scope にプロパティを追加すると、新しいプロパティがテンプレートに表示されることです。$scope メソッドの外側 (まだコントローラー内) に追加された場合、そうではありません。

于 2015-12-18T21:41:52.270 に答える
1

ディレクティブ オブジェクトに追加scope: {file-input: '='}して、ディレクティブのスコープとその親スコープの間で双方向バインディングを行います。

于 2013-11-05T21:49:56.943 に答える