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.