2017-01-31 5 views
0

Я использую директиву, которая использует ng-file-upload для загрузки файлов. Эта директива включена в модальное окно, вызывается из основного контроллера. Я называю $ rootScope. $ Broadcast event от основного контроллера и прослушивание этого события в директиве. У меня возникают проблемы, когда пользователь дважды открывает модальный (или несколько раз), кажется, что область действия директивы для каждой вызываемой директивы не уничтожается, и она идет 2 раза в области. $ On directive call.Область действия не уничтожается

Модальные Просмотр

<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); 
        } 
       } 
      }); 
     } 
    } 
})(); 

ответ

0

Я не могу сказать, если ваша директива уничтожается или нет, но с текущим кодом, слушатель не разрушается с размахом в любом случае.

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

Эта строка возвращает незарегистрированную функцию. Вы должны использовать его, когда ваша область действия уничтожена.

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

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

Хм .. Я не уверен, если вы понимаете. Как вы хотите использовать его, когда вызывается метод destroy? Я хочу называть это $ с основного контроллера. С вашим предложением с объемом. $ On ('$ destroy', unregister); он никогда не заходит в $ on. – Bukic

Смежные вопросы