Error Invalid Isolate Scope Definition in a directive with AngularJS when reopening modal

0

I have the following problem. I have a modal that uses a directive to which two callback functions are passed and which, when I open the modality for the first time, works perfectly. The problem comes when I close the modal and reopen it. The error appears in the console:

Invalid Isolate Scope Definition
Invalid {3} for directive 'dropZone'. Definition: {... NaNd: '021' ...}

Here the code of the directive:

moduloDirectivas.directive('dropZone',[
    function(){
        return config = {
            restrict: "A",
            scope: { 
                callbackUpload: '&callbackUpload', 
                callbackBeforeUpload: '&callbackBeforeUpload' 
            },
            template:'<label class="drop-zone">'+
                     '<input type="file" id="fileinput" />'+
                     '<div ng-transclude></div>'+       // <= transcluded stuff
                     '</label>',
            transclude: true,
            replace: true,
            require: '?ngModel',
            link: function(scope, element, attributes, ngModel){
                var upload = element[0].querySelector('input');    
                    upload.addEventListener('drop', uploadFileSelect, false);
                    upload.addEventListener('change', uploadFileSelect, false);

                    config.scope = scope;
            }
        }

        function uploadFileSelect(e) {
            e.stopPropagation();
            e.preventDefault();
            config.scope.callbackBeforeUpload({estado: true});
            var file = e.dataTransfer ? e.dataTransfer.files: e.target.files;
            file = file[0];

            var reader = new FileReader();
                reader.onload = (function(file) {
                    return function(e) { 
                        var data = e.target.result;
                        var objParameters = {
                            data: data,
                            nombreFichero: file.name,
                            tamanio: file.size
                        };
                        config.scope.callbackUpload({data: objParameters});
                        angular.element("#fileinput").val(null);
                        config.scope.callbackBeforeUpload({estado: false});
                    }
                })(file);
                reader.readAsDataURL(file);
        }
    }
]);

Let's see if you can think of what may be happening. Thanks.

    
asked by Isaac R 15.09.2017 в 12:57
source

1 answer

0

From the AngularJS documentation (the bold ones are mine):

& or &attr - provides a way to execute an expression in the context of the parent scope . If no attr name is specified then the attribute name is assumed to be the same as the local name. Given <my-component my-attr="count = count + value"> and the isolate scope definition scope: { localFn:'&myAttr' } , the isolate scope property localFn will point to a function wrapper for the count = count + value expression.

I have hardly worked with AngularJS, but as I understand it, there should be expressions in the parent context for the two functions you declare:

scope: { 
            callbackUpload: '&callbackUpload', 
            callbackBeforeUpload: '&callbackBeforeUpload' 
        }

Check that you meet the required conditions

    
answered by 15.09.2017 в 16:04