Question

我正在尝试创建一个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;
        });
};

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

更新

我做了以下更新，但我的范围变量仍未更新。调用我的更改函数，但它没有注意到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;
        });
};

Answer 1

在你的指令对象中添加scope: {file-input: '='}以在你的指令范围和它的父范围之间进行双向绑定。

Answer 2

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

尽可能接近链路充当模板的控制器（范围）。

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

范围变量不在指令范围之外设置

2 个答案: