在angularjs指令中更新控件视图

我已经在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();
                                        });
                            } 
                        };

（函数（）{
有棱角的
.module（'testmodule'）
.指令（“文件上传”，文件上传）；
fileUpload.$inject=['$upload'，'$http']；
函数fileUpload（$upload，$http）{
返回{
限制：'E'，
编译：函数编译（远程通讯、tAttrs、转置）{
远程医疗(
'' +
'' +
'' +
“上传”+
'' +
“
{{errorMessage}}
”+
'' +
''；返回{post:function postLink（作用域、iElement、iAttrs）{
scope.onFileSelect=函数（$files，purpose）{
var$file=$files[0]，
fileType=scope.getFileType（$file）；
如果（$file.size>0）{
$upload
.上传({
url:'testurl'+purpose+'？文件类型='+fileType[1]，
方法：“POST”，
文件：$file
})
.那么(
函数（数据、状态、标题、配置）{
angular.forEach（data.data，函数（文件）{
attachedFiles.push（文件）；
});
}否则{
growlFactory.error（）；
}
范围。SetAttachedFileObject（attachedFiles）；
范围.设置文件可用性（目的、附件文件）；
var thisAttachedFiles=scope.getAttachedFileObject（）；
var updateTemplate=''；
if（scope.setDocumentAvailability（scope.purpose，本附件文件））{
UpdateTemplate=UpdateTemplate.concat（“”）；
对于（变量i=0；i”+此附件文件[i]。原始文件名+”
'+
“删除”+
'');
UpdateTemplate=UpdateTemplate.concat（“”）；
}
UpdateTemplate=UpdateTemplate.concat（“”）；
}
UpdateTemplate=UpdateTemplate.concat（“”）；
} 
iElement.find（'div#notadded'）。替换为（updateTemplate）；
growlFactory.success（）；
});
} 
};

---

为了清晰起见，我只放了相关的代码。

我自己找到了答案。每当我们想使用一个指令的多个实例时，我们必须定义独立的作用域。在上面的代码中添加

scope: true,

之后

restrict: 'E',

为我工作