속성 변경시 다시 초기화

Question

두 번째 지시문이 있는데 첫 번째 지시문에서 두 번째 지시문을 호출합니다.

이 제 1 지시

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

나는 위의 코드에서 사용 angular.element을 usixng 제 2 지시를 호출하고 있습니다. 내가 maxImages 그때가 들고 API를 호출이 변수를 사용하고 때 다음 업데이트 된 값을주고 있지만의 값을 확인하고 내 컨트롤러에서 지금

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, 
    }; 
}; 

: 아래

제 2 지시자이다 이전 값. 내가

Answer 1

를위한 솔루션을 찾을 수

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

그것은 내 ABC.UploaderInit 함수에 업데이트 된 값을 제공해야 내 지시에 maxImages의 값을 변경할 때 여기 내 컨트롤러

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

그래서 내 문제, 제 지시문의 속성이 변경 될 때마다 제 2 지시문을 호출 했으므로이 문제가 발생했습니다. 따라서 지시문의 여러 인스턴스를 작성하고있었습니다.

이제는 이것을 처리하기 위해 제 2 지시어를 호출하기 전에 제 2 지시문의 오래된 인스턴스를 파기하고 있습니다.

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