0

我正在尝试创建一个 AngularJS 指令，该指令将文件名从<input type="file">元素发送到文件上传工厂。这项工作基于以下博客文章：

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;
        });
};

我错过了什么不允许控制器正确设置和保留从指令发送的值？

更新

我进行了以下更新，但我的范围变量仍未更新。我的 change 函数被调用，但它没有注意到给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

在您的指令对象中添加scope: {file-input: '='}在您的指令范围和它的父范围之间有两种方式的绑定。

于 2013-11-05T21:49:56.943 回答
1

尝试将文件添加到链接功能。我有同样的问题，这就是为我解决的问题。

据我所知，链接充当模板的控制器（范围）。

但是，让我感到困惑的一件事是，当我从控制器的 $scope 方法中向 $scope 添加属性时，模板会看到新属性。当添加到 $scope 方法之外（仍在控制器中）时，它不是。

于 2015-12-18T21:41:52.270 回答