Javascript Angularjs文件上传指令

我正在创建一个用于表单的文件上传指令

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

            }
        }
    }]);

角度模块（“应用程序”） .指令（“myFileUpload”，[函数（）{ 返回{ 限制：“E”， 模板：“”， 范围：{ 文件：“=” }, 链接：功能（范围、元素）{ 元素更改（功能（事件）{ 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>

{{item.filename}

如果我没有在input

myform.title

中输入文本，则不会列出文件。

的回调

element.change

发生在“角度世界”之外。你需要让angular知道“发生了什么事” 试试这个

元素更改（函数（事件）{
scope.files=event.target.files；
event.preventDefault（）；
作用域：$apply（）；
});

分配

作用域文件后，尝试调用
作用域。$apply（）