1

我有兩條指令,從第一條指令調用2nd指令。重新初始化指令更改屬性

這是我的第一個指令

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

我打電話給我的第二個指令usixng angular.element在上面的代碼中使用。

下面是我的第二個指令:

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, 
    }; 
}; 
現在在我的控制器

當我檢查maxImages則賦予更新的值,但是當我使用這個變量來調用API則持有的價值較舊的價值。這裏是我的控制器

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

所以,當我改變maxImages的價值在我的指令

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

應該給予更新的值我ABC.UploaderInit功能

回答

0

找到一個解決方案我問題, 我得到這個問題,因爲當第一條指令的屬性發生改變時,我正在調用2nd指令,所以我創建了我的指令的多個實例。

所以現在要處理這個問題,我在第二條指令之前銷燬了第二條指令的舊實例。

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