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