Question

我正在使用使用ng-file-upload上传文件的指令。该指令包含在从主控制器调用的模态窗口中。我从主控制器调用$ rootScope。$ broadcast事件并在指令中监听该事件。当用户打开模态两次（或更多次）时，我遇到了问题，似乎每个被调用指令的指令范围都没有被销毁，并且它的范围是2倍。$ on指令调用。

模态视图

<div class="dup-group-doc2 col-md-9" data-ng-if="carvm.isEdit">
    <upload-document add-button="true" delete-button="false" review-obj="carvm.review" document-types="carvm.documentTypes" agencies="carvm.agenciesByReview" module="'CAR'" show-upload-button="false" show-add-button="true" event="carvm.event">>
    </upload-document>
</div>

主控制器

     function openImpModal(isMultiple, isEdit, finding, eventId, event) {
            followupvm.isMultiple = isMultiple || false;
            followupvm.isEdit = isEdit || false;
            followupvm.finding = finding;
            followupvm.eventId = eventId;
            followupvm.impModalInstance = $uibModal.open({
                animation: true,
                size: 'lg',
                templateUrl: "src/app/modules/planning/views/modals/implementation.modal.view.html",
                controller: 'ImplementationModalController as impvm',
                backdrop: 'static',
                keyboard: false
            });

            followupvm.impModalInstance.result.then(function(selectedItem) {

                if (selectedItem.object !== {}) {
                        $rootScope.$broadcast('callDirective', object);
                }
            }
});

指令视图

<div class="form-group row">
                        <label for="customDocName" class="col-md-4 control-label text-right">Document Name:</label>
                        <input type="text" class="col-md-3" id="customDocName" placeholder="Name document (optional)" data-ng-model="reviewObj.docObj.docName" data-ng-change="onChange()">
                        <input ng-if="!isEdit" type="file" class="col-md-5" ngf-select ng-model="$parent.docFile" name="file" ngf-max-size="5MB" required value="Choose File" ngf-model-invalid="errorFile" validfile>
                    </div>

指令控制器

(function() {
    'use strict';

    angular
        .module('planning')
        .directive('uploadDocument', uploadDocument);

    uploadDocument.$inject = ['DocumentService', 'Upload', 'configParams', '$timeout', '$rootScope', 'CommentService'];

    /* @ngInject */
    function uploadDocument(DocumentService, Upload, configParams, $timeout, $rootScope, CommentService) {
        var directive = {
            link: link,
            restrict: 'AE'
            scope: {
                index: "@?",
                addButton: "=?",
                loggedUser: "=",
                deleteButton: "=?",
                reviewObj: "=?",
                documentTypes: "=",
                agencies: "=?",
                module: "=",
                event: "=?",
                showUploadButton: "=?",
                showAddButton: "=?",
                isEdit: "=?",
                fileObj: "=?"
            },
            templateUrl: 'src/app/modules/planning/directives/document-upload/documentUpload.view.html'
        };
        return directive;

        function link(scope, element, attrs) {

            scope.reviewObj.docObj = {};
            scope.docFile = {};
            scope.reviewObj.docObj.restricted = false;
            scope.showPreviousComments = false;
            scope.documentTypeRequired = false;
            scope.objectAdded = false;

            scope.uploadClicked = false;

            /* istanbul ignore if */
            if (scope.isEdit) {
                scope.reviewObj.docObj.docName = scope.fileObj.documents.documentName;
                if (scope.reviewObj.docObj.docName === 'undefined') {
                    scope.reviewObj.docObj.docName = '';
                }
                scope.reviewObj.docObj.restricted = scope.fileObj.documents.restricted;
                scope.reviewObj.docObj.selectedDoc = scope.fileObj.documents.refDocTypeId;
                scope.reviewObj.docObj.previousComments = scope.fileObj.comments;
            }
            scope.uploadDoc = function(file, newEvent) {
                // code for uploading document                
            };

            $rootScope.$on('callDirective', function(event, object) {
                    **// If I open same modal twice second time when $rootScope event is send it will go twice to this $on event**
                if (scope.module === object.moduleName) {
                    if (!scope.objectAdded) {
                        scope.eventModule = object.moduleName;
                        scope.event = object.event;
                        scope.findingsIdList = object.findingsIdList;
                        scope.reviewObj.docObj = object.uploadObject;
                        scope.objectAdded = true;
                        scope.uploadDoc(object.fileToUpload, true);
                    }
                }
            });
        }
    }
})();

Answer 1

我不能说你的指令是否被销毁，但是使用你当前的代码，你的监听器不会被范围破坏。

$rootScope.$on('callDirective', function(event, object) { ... });

此行返回取消注册的功能。当您的范围被销毁时，您必须使用它。

var unregister = $rootScope.$on('callDirective', function(event, object) { ... });

scope.$on('$destroy', unregister);

指令范围未被破坏

1 个答案: