Why does ngImgCrop not work in a modal, angularJS?

0

I have the following modal: In this modal there is a field that will be useful to load an image and fill different fields for the creation of users. imageCropInput

<div class="modal-style fade-in">
    <div class="modal-header clearfix">
        <h4 class="modal-title">Crear Usuario</h4>
        <span class="close ion ion-android-close" ng-click="modalClose()"></span>
    </div>
    <div class="modal-body page page-forms-imagecrop">
        <div class="panel-body">
            <form role="form" class="form-horizontal" ng-submit="btnCrearUsuario(item)">
                <div class="form-group page-wrap">
                    <div class="col-md-12">
                        <div class="mb15">Seleccione un archivo de imagen:{{funcionHandle}} <input type="file" id="imageCropInput" /></div>
                        <div class="clearfix">
                            <div class="cropArea col-sm-5 col-xs-12 mb15">
                                <img-crop image="myImage" result-image="myCroppedImage" area-type="{{areaType}}"></img-crop>
                            </div>
                            <div class="croppedImage mb15">
                                <img ng-src="{{myCroppedImage}}" alt="">
                            </div>
                        </div>
                        <div class="clearfix">
                            <button class="btn btn-default btn-sm mr5" ng-model="areaType" btn-radio="'square'" uncheckable>Cuadrado</button>
                            <button class="btn btn-default btn-sm" ng-model="areaType" btn-radio="'circle'" uncheckable>Redondeado</button>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-6">  
                        <label class="control-label small">Nombre</label>
                        <input type="text" class="form-control" ng-model="item.nombre" placeholder="Ingrese nombre" required>
                    </div>  
                    <div class="col-md-6">  
                        <label class="control-label small">Apellido</label>
                        <input type="text" class="form-control" ng-model="item.apellido" placeholder="Ingrese apellido" required>
                    </div>  
                </div>
                <div class="form-group">
                    <div class="col-md-6">  
                        <label class="control-label small">Usuario</label>
                        <input type="text" class="form-control" ng-model="item.usuario" placeholder="Ingrese usuario" required>
                    </div>  
                    <div class="col-md-6">  
                        <label class="control-label small">Contraseña</label>
                        <input type="password" class="form-control" ng-model="item.password" placeholder="........." required>
                    </div>  
                </div>
                <div class="form-group">
                    <div class="col-md-6">  
                        <label class="control-label small">Tipo de usuario</label>
                        <select class="form-control" ng-model="item.idtipousuario">
                            <option value="0" selected disabled>Seleccione</option>
                            <option value="1">Administrador</option>
                            <option value="2">Digitador</option>
                            <option value="3">Agente</option>
                        </select>
                    </div>  
                    <div class="col-md-6">  
                        <label class="control-label small">Correo</label>
                        <input type="email" class="form-control" ng-model="item.correo" placeholder="ejemplo: [email protected]" ng-model="fv.email" required>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-6">  
                        <label class="control-label small">Telefono</label>
                        <input type="number" class="form-control" ng-model="item.telefono" ng-maxlength="8" ng-minlength="8" required>
                    </div>  
                    <div class="col-md-6">  
                        <label class="control-label small">Estado</label>
                        <select class="form-control" ng-model="item.estado">
                            <option value="0" selected disabled>Seleccione</option>
                            <option value="1">Habilitado</option>
                            <option value="2">Deshabilitado</option>
                        </select>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary right">Aceptar</button>
            </form>
        <div>
    </div>
</div>

and my driver like this:

;(function() {
"use strict";

angular.module("Usuarios", ['ngImgCrop'])
    .controller("UsuariosCtrl", ["$scope", "$modal", "$http", "$filter", "$modalStack", "$route", "$timeout", "toastr", function($scope, $modal, $http, $filter, $modalStack, $route, $timeout, toastr) {
        var server = $scope.ipServer;
        var token  = localStorage.getItem('satellizer_token');

        //----------Modales----------------
        $scope.modalAnim = "default";

        $scope.modalOpenCrear = function() {
            $scope.item = {};
            $modal.open({
                templateUrl: "views/ui/modalUsuario/modalUsuario.html",
                size: "lg",
                controller: "UsuariosCtrl",
                scope: $scope,
                windowClass: $scope.modalAnim
            });

        }

        $scope.modalClose = function() {
            $scope.$close();
        }
        //---------Fin modales-----------

        //-------- Enviar imagen de perfil --------------
        $scope.myImage='';
        $scope.myCroppedImage='';
        $scope.areaType = "square";

        var handleFileSelect= function(evt) {
            console.log("ENTRO A LA FUNCION");

            var file=evt.currentTarget.files[0];
            var reader = new FileReader();
            reader.onload = function (evt) {
                $scope.$apply(function($scope){
                    $scope.myImage=evt.target.result;
                });
            };
            reader.readAsDataURL(file);
        };
        angular.element(document.querySelector('#imageCropInput')).on('change',handleFileSelect);
        //---------------------------------------------------------

    }])
}())

The modal if it has communication with the controller, since it allows me to create users, only now I am adding the new option to add image. When I load the view where the modal in the console is, the following is output, I understand that if the ngImgCrop is loaded

and if I upload an image to the modal only remains this way:

Thank you in advance.

    
asked by JG_GJ 13.10.2018 в 03:49
source

1 answer

1

I had to modify the following lines: HTML:

  <input type="file" id="imageCropInput" ng-model="imageCropInput" onchange="angular.element(this).scope().uploadFile(this.files[0])"/></div>

Controller:

 $scope.myImage='';
            $scope.myCroppedImage='';
            $scope.areaType = "square";

            $scope.uploadFile = function(file) {
                if (file) {
                    // ng-img-crop
                    var imageReader = new FileReader();
                    imageReader.onload = function(image) {
                        $scope.$apply(function($scope) {
                            $scope.myImage = image.target.result;
                        });
                    };
                    imageReader.readAsDataURL(file);
                }
            };
    
answered by 13.10.2018 в 04:29