Réinitialiser la directive sur le changement d'attribut

Question

J'ai deux directives, appelant la 2ème directive de la 1ère directive.

Ceci est ma 1ère directive

var initializeWidget = function ($compile, $timeout, $rootScope) { 
    return { 
     restrict: 'EA', 
     scope: { 
      maxImages: '@', 
     }, 
     link: function (scope, element, attrs) { 


      if (!scope.cloudinaryFolder) { 
       throw 'folder value is missing in image uploader directive'; 
      } 
      if (!scope.cloudinaryTags) { 
       throw 'tags value is missing in image uploader directive'; 
      } 
      //1 
      attrs.$observe('maxImages', function (newMaxImages) { 
       console.log('varun==' + newMaxImages); 
       $timeout(function() { 

        angular.element(document.body).append($compile('<div class="sp-upload-widget" sp-upload-widget up-max-images="' + scope.maxImages + '"></div>')(scope)); 
        scope.$apply(); 
       }, 10); 
      }); 
     } 
    }; 
}; 

J'appelle ma 2e directive usixng angular.element utilisé dans le code ci-dessus.

Ci-dessous est ma 2ème directive:

var spUploadWidget = function ($q, Cloudinary, ENV) { 
    var templateUrl; 
    if ('dev' === ENV.name) { 
     templateUrl = '/seller/modules/uploadWidget/views/upload.html'; 
    } 
    else if ('prod' === ENV.name) { 
     templateUrl = './views/upload.html'; 
    } 
    return { 
     restrict: 'AE', 
     scope: {}, 
     bindToController: { 
      maxImages: '=?upMaxImages', 
     }, 
     replace: false, 
     controller: 'uploadWidgetController', 
     controllerAs: 'up', 
     templateUrl: templateUrl, 
    }; 
}; 

maintenant dans mon contrôleur lorsque je vérifie la valeur de maxImages il donne la valeur actualisée, mais lorsque j'utilise cette variable pour appeler l'API, alors il tient la valeur plus ancienne. Voici mon contrôleur

console.log('up===' + self.maxImages); 
    self.openUploader = function() { 
     self.closeModal(); 
     ABC.UploaderInit(self.maxImages); 
    }; 

Alors, quand je change la valeur de maxImages dans ma directive

<div initialize-widget max-images="maxImages"></div> 

Il devrait donner la valeur actualisée à ma fonction ABC.UploaderInit

Answer 1

trouvé une solution pour mon problème, Je recevais ce problème parce que j'appelais la 2e directive chaque fois que l'attribut de la première directive était en train de changer, donc je créais plusieurs instances de ma directive. Donc, maintenant, pour gérer cela, je détruis l'ancienne instance de la 2e directive avant d'appeler la 2e directive.

   $rootScope.$on('destroySpUploadWidget', function (event, args) { 
       if (args.modalId === ctrl.modalId) { 
        scope.$destroy(); 
        element.remove(); 
       }