Question

我已经编写了一个在angularjs中使用fileupload控件的指令。我在我的应用程序中的几个地方使用它（即使它在一个页面中使用了两次）。当我上传文件时，我会使用删除按钮显示该文件的名称。问题是，当我上传文件时，同一页面中的实例都会更新以显示相同的文件名和删除按钮，而它应该显示在我已更新文件的实例上。感谢任何帮助。谢谢这是我的代码：

(function () {
    angular
        .module('testmodule')
        .directive('fileUpload', fileUpload);
    fileUpload.$inject = ['$upload', '$http'];
    function fileUpload($upload, $http) {
        return {
            restrict: 'E',
            compile: function compile(tElement, tAttrs, transclude) {
                tElement.append(

                       '<div id="notadded" ng-show="!setDocumentAvailability(purpose, getAttachedFilesObject())">' +
                           '<div ng-file-drop ng-model="files" class="drop-box" drag-over-class="{accept:\'dragover\', reject:\'dragover-err\', delay:100}"' +
                            'multiple="true" allow-dir="true" accept="image/*">' +
                                '<button ng-file-select="onFileSelect($files, purpose)" ng-model="files" multiple="true" class="' + tAttrs.setbuttonclass + '">' +
                                '<i class="fa fa-edit"></i>&nbsp;Upload' +
                                '</button>' +
                                '<p ng-show="invalidFile" class="help-block">{{errorMessage}}</p>' +
                           '</div>' +
                       '</div>'); return { post: function postLink(scope, iElement, iAttrs) {
                            scope.onFileSelect = function ($files, purpose) {
                            var $file = $files[0],
                                fileType = scope.getFileType($file);
                                if ($file.size > 0) {
                                $upload
                                    .upload({
                                        url: 'testurl' + purpose + '?fileType=' + fileType[1],
                                        method: 'POST',
                                        file: $file
                                    })
                                    .then(
                                        function (data, status, headers, config) {

                                                angular.forEach(data.data, function (file) {
                                                    attachedFiles.push(file);
                                                });
                                            } else {
                                                growlFactory.error();
                                            }
                                            scope.setAttachedFilesObject(attachedFiles);
                                            scope.setDocumentAvailability(purpose, attachedFiles);

                                            var thisAttachedFiles = scope.getAttachedFilesObject();
                                            var updatedTemplate = '';
                                                if (scope.setDocumentAvailability(scope.purpose, thisAttachedFiles)) {
                                                    updatedTemplate = updatedTemplate.concat('<div id="added">');

                                                for (var i = 0; i < thisAttachedFiles.length; i++) {
                                                    updatedTemplate = updatedTemplate.concat('<div>');  


                                                    if (thisAttachedFiles[i].Purpose == purpose) {
                                                        updatedTemplate = updatedTemplate.concat( 
                                                            '<div class="row">');


                                                            updatedTemplate = updatedTemplate.concat(
                                                                '<div class="col-xs-6">' +
                                                                '<div class="thumbnail"><img src="' + scope.getCompleteImageUrl() + '"/></div>' +
                                                                '</div>');
                                                        }
                                                        updatedTemplate = updatedTemplate.concat('<div class="col-xs-6">' +
                                                                    '<p>File attached:<br />' + thisAttachedFiles[i].OriginalFileName + '</p>' +
                                                                    '<button id="remove" ng-click="scope.removeFile(scope.purpose, scope.getAttachedFilesObject())" class="btn btn-default btn-xs">Remove</button>' +
                                                                '</div>');


                                                        updatedTemplate = updatedTemplate.concat('</div>');
                                                    }

                                                    updatedTemplate = updatedTemplate.concat('</div>');
                                            }

                                                updatedTemplate = updatedTemplate.concat('</div>');
                                                } 
                                            iElement.find('div#notadded').replaceWith(updatedTemplate);



                                            growlFactory.success();
                                        });
                            } 
                        };

为了清楚起见，我只提供了相关的代码。

Answer 1

我自己想出了答案。每当我们想要使用指令的多个实例时，我们必须定义隔离范围。在上面的代码中添加

scope: true,

之后

restrict: 'E',

为我工作。

更新angularjs指令中的控制视图

1 个答案: