javascript - Angular Directive(指令)不更新模型

Question

您好，我正在尝试通过指令更新我的模型，但它不起作用。我找不到为什么。有人可以帮忙吗？

HTML:

<input type="file" name="documents" file-model ng-model="documents"multiple>
<button class="btn btn-xs btn-default" ng-click="loadDocuments()">

指令:

app.directive("fileModel", ["$parse",function ($parse) {
    return {
        restrict: "A",
        require:"ngModel",
        scope: {
            ngModel: '='
        },
        link: function (scope, element, attrs) {
            var model = $parse(attrs.fileModel);
            var modelSetter = model.assign;
            element.bind("change", function () {
                scope.$apply(function () {
                    scope.ngModel = element[0].files;
                });
            });
        }
    };
}]);

结果:

$scope.documents={};
$scope.loadDocuments = 函数 () {
console.log($scope.documents);//打印未定义
}

Answer 1

试试这个:

app.directive("fileModel", ["$parse",function ($parse) {
    return {
        restrict: "A",
        link: function (scope, element, attrs) {
            var model = $parse(attrs.fileModel);
            var modelSetter = model.assign;
            element.bind("change", function () {
                scope.$apply(function () {
                    modelSetter(scope, element[0].files[0]);
                });
            });
        }
    };
}]);



<input type="file" name="documents" file-model="documents" multiple>