更改属性时重新初始化指令答案

【问题标题】：Reinitialise directive on change of attribute更改属性时重新初始化指令
【发布时间】：2017-09-06 09:47:03
【问题描述】：

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

这是我的第一个指令

    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 函数提供更新的值

【问题讨论】：

标签： angularjs angularjs-directive directive angular-directive

【解决方案1】：

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

所以现在为了处理这个问题，我在调用第二个指令之前销毁了第二个指令的旧实例。

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

【讨论】：