Angularjs文件上传指令

时间:2016-01-11 22:00:55

标签: javascript angularjs angularjs-directive

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

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中输入文字,则文件不会列出。

1 个答案:

答案 0 :(得分:1)

回调

element.change

发生在&#34; angular-world&#34;之外。你需要让角度知道&#34;发生了什么事情&#34; 试试这个

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