AngularJS文件上传指令

Question

我正在创建文件上载指令以在表单中使用。

angular.module("app")
    .directive("myFileUpload", [function () {
        return {
            restrict: "E",
            template: '<input type="file" multiple class="form-control" placeholder="Select file">',
            scope: {
                files: "="
            },
            link: function (scope, element) {

                element.change(function (event) {
                    scope.files = event.target.files;
                    event.preventDefault();
                });

            }
        }
    }]);

我可以在应用程序的某个地方使用此指令。

<div class="col-sm-9">
    <input ng-model="myform.title">
    <my-file-upload files="myform.files"></my-file-upload>
</div>

我想列出这样选择的文件：

<div class="col-sm-9">
    <input ng-model="myform.title">
    <my-file-upload files="myform.files"></my-file-upload>
    <p ng-repeat="item in myform.files">{{item.filename}}</p>
</div>

如果我没有在输入myform.title输入文本，则文件不会列出。

Answer 1

的回调

element.change

发生在“角度世界”之外。 您需要让angular知道“某事已发生”，请改用此方法

 element.change(function (event) {
                scope.files = event.target.files;
                event.preventDefault();
                scope.$apply();
            });