Question

我有一个基本的角色问题。

我有一个如下所示的指令模板：

<div>
    <form name="newPhotosForm" role="form" enctype="multipart/form-data" ng-disabled="appStatus.busy || fileManagerStatus.uploading">
        <div class="" ng-hide="hasFiles">
            <label for="newPhotos">Select and upload attachment</label>
            <input type="file" id="newPhotos" class="uploadFile" accept="image/*" files="files" has-files="hasFiles" multiple>
        </div>
        <div class="" ng-show="hasFiles && !fileManagerStatus.uploading">
            <ul class="list-inline">
                <li><strong>files:</strong></li>
                <li ng-repeat="file in files"> {{file.name}}</li>
            </ul>
            <input class="btn btn-primary" type="button" ng-upload="upload(files)" ng-click="upload(files);reset()" file-on-change="fileChange($files)" value="upload">
            <input class="btn btn-warning" type="reset" value="cancel" />
        </div>
        <div class="" ng-show="fileManagerStatus.uploading">
            <p class="help-block">uploading</p>
        </div>
        <br />



        <ul>
            <li ng-repeat="file in imageFiles">
                <a ng-href="" ng-click='handleGetAttachmentSuccess(file.name)' ng-model="item.imageFile">{{file.ImageName}}</a>
            </li>
        </ul>


    </form>
</div>

它基本上用于上传文件。我有一个常规表单（即HTML），在表单加载时显示文件附件列表。我正在尝试将两者同步以使它们协同工作。基本上我想要发生的是：

当表单加载时，我希望模板显示文件选择对话框，我希望我的常规表单显示附加到显示项目的文件列表（如果有）。当我使用指令模板选择文件时，我希望隐藏常规表单中显示的文件列表。问题是我不确定如何在我的指令模板和常规表单之间进行通信。基本上我只是想隐藏我的常规表单，让模板在我上传文件时显示文件列表。

这是Angular Factory中的文件上传功能：

function upload(files) {
            //ToDo Check that file extension exists here

            service.status.uploading = true;
            appInfo.setInfo({ busy: true, message: "uploading files" });

            var formData = new FormData();

            angular.forEach(files, function (file) {
                formData.append(file.name, file);
            });


            return fileManagerClient.save(formData)
                                        .$promise
                                        .then(function (result) {
                                            if (result && result.files) {
                                                result.files.forEach(function (file) {
                                                    if (!fileExists(file.name)) {
                                                        service.files.push(file);
                                                    }
                                                });
                                            }

                                            appInfo.setInfo({ message: "files uploaded successfully" });

                                            return result.$promise;
                                        },
                                        function (result) {
                                            appInfo.setInfo({ message: "something went wrong: " + result.data.message });
                                            return $q.reject(result);
                                        })
                                        ['finally'](
                                        function () {
                                            appInfo.setInfo({ busy: false });
                                            service.status.uploading = false;
                                        });
        }

以下是常规表单页面的相关源代码：

 <ul ng-show="showList">
                    <li ng-repeat="attachment in item.Images">
                        <a ng-href="" ng-click='viewAttachment($event, attachment, $index)' ng-model="item.imageFile">{{attachment.ImageName}}</a>
                    </li>
                </ul>

此外，可能还有另一种方法可以做到这一点，因此感谢任何/所有帮助/建议。

谢谢，

皮特

如何在AngularJS中的指令模板中隐藏表单上的html？

0 个答案: