Tengo una directiva angular de carga de archivos que funciona cuando no se coloca dentro de un conjunto de pestañas. En el siguiente código, verá que después de seleccionar un archivo y cargarlo, establece

 scope.$parent.file = file;

Sin embargo, en mi controlador, cuando intento acceder a $ scope.file, no está definido. Consulte la directiva, el controlador y la plantilla a continuación. De nuevo, como se mencionó, si coloco la plantilla fuera de un conjunto de pestañas (interfaz de usuario angular), entonces la función upload() funciona; de lo contrario, aparece el error "seleccione un archivo para cargar":

FileUpload.js:

'use strict';

var fileUploader = angular.module('fileUploader', []);

fileUploader.directive('file', function() {
    return {
        restrict: 'AE',
        scope: {
            file: '@'
        },
        link: function(scope, el, attrs){

            el.bind('change', function(event){
                var files = event.target.files;
                var file = files[0];
                scope.file = file;
                scope.$parent.file = file;
                scope.$apply();
            });
        }
    };
});

MyController:

$scope.upload = function() {

            var bucket = new AWS.S3({ params: { Bucket: aws.public.bucket } });
            AWS.config.update({ accessKeyId: aws.public.access_key,
                                secretAccessKey: aws.public.secret_key });
            AWS.config.region = 'us-east-1';

            if($scope.file) {
                // Perform File Size Check First
                var fileSize = Math.round(parseInt($scope.file.size));
                if (fileSize > $scope.sizeLimit) {
                    toastr.error('Sorry, your attachment is too big. <br/> Maximum '  + $scope.fileSizeLabel() + ' file attachment allowed','File Too Large');
                    return false;
                }
                // Prepend Unique String To Prevent Overwrites
                var uniqueFileName = $scope.uniqueString() + '-' + $scope.file.name;

                var params = { Key: uniqueFileName, ContentType: $scope.file.type, Body: $scope.file, ServerSideEncryption: 'AES256' };

                bucket.putObject(params, function(err, data) {
                    if(err) {
                        toastr.error(err.message,err.code);
                        return false;
                    }
                    else {
                        // Upload Successfully Finished
                        toastr.success('File Uploaded Successfully', 'Done');

                        // Reset The Progress Bar
                        setTimeout(function() {
                            $scope.uploadProgress = 0;
                            $scope.$digest();
                        }, 4000);
                    }
                })
                    .on('httpUploadProgress',function(progress) {
                        $scope.uploadProgress = Math.round(progress.loaded / progress.total * 100);
                        $scope.$digest();
                    });
            }
            else {
                // No File Selected
                toastr.error('Please select a file to upload');
            }
        }

Mi plantilla:

  <div id="videoEditForm" ng-show=" showAddVideoForm || showEditVideoForm">
            <tabset>
                <!-- Videos -->
                <tab id="webVideo">
                    <tab-heading>
                        <i class="fa  fa-film"></i>YouTube Video
                    </tab-heading>
                    <edit-video>video form</edit-video>
                </tab>

                <tab id="uploadVideo">
                    <tab-heading>
                        <i class="fa  fa-film"></i>Upload a Video {{file.name}}
                    </tab-heading>
                    <div class="panel-body">
                        <input class="bottom-marg-15" type="file" name="file" file></input>
                        <!-- Progress Bar -->
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="{{ uploadProgress }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ uploadProgress }}%;">
                                {{ uploadProgress == 0 ? '' : uploadProgress + '%' }}
                            </div>
                        </div>
                        <a class="btn btn-primary btn-block btn-lg" ng-click="upload()">Upload</a>
                    </div>
                </tab>
            </tabset>
        </div>
0
Paul Preibisch 3 sep. 2014 a las 22:14

2 respuestas

La mejor respuesta

Encontré el problema con lo anterior ... resulta que estaba llamando $ element.css incorrectamente ... Estaba envolviendo el css con citas, pero debería haber sido:

 link = function($scope, $element, $attrs){
                $scope.$watch('pos', function () {
                        console.log("position is: "+$scope.pos);
                       $element.css({
                          top: $scope.pos + 'px',
                          position: 'relative'
                        });
                        $attrs.style="top:'+$scope.pos+'px;position:relative;!important'";

                });
            };
0
Paul Preibisch 8 sep. 2014 a las 22:41

Cuando su directiva se agrega a un conjunto de pestañas, alcance. $ Parent no apuntará al alcance de su controlador, sino a la pestaña o el alcance del juego de pestañas.

Una mejor manera de hacer esto es cambiar su atributo de archivo a una variable de enlace bidireccional en su directiva. La directiva puede usar esta variable para establecer un valor que se pueda usar en el alcance del controlador.

La definición de la directiva:

fileUploader.directive('file', function() {
  return {
    restrict: 'AE',
    scope: {
        file: '='
    },
    link: function(scope, el, attrs){

        el.bind('change', function(event){
            var files = event.target.files;
            var file = files[0];
            scope.file = file;
            scope.$apply();
        });
    }
  };
});

Uso:

<div file="aFile">

AFile entonces por una variable en el alcance de su controlador

0
Koen Weyn 3 sep. 2014 a las 19:25