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

Question

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

这是我的第一个指令

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

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

Reinitialise directive on change of attribute

angularjs

angularjs-directive

directive

angular-directive