Question

我有两个指令，从1st指令调用第二个指令。

这是我的第一个指令

    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函数

Answer 1

找到解决我问题的方法，我遇到了这个问题，因为每当第一个指令的属性发生变化时我都在调用第二个指令，所以我创建了多个指令实例。

所以现在要解决这个问题，我在调用第二个指令之前就破坏了第二个指令的旧实例。

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

关于属性变更的重新初始化指令

1 个答案: