Tengo el siguiente modal:
En dicho modal existe un campo que me servirá para cargar una imagen y llenar distintos campos para la creación de usuarios.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>
y mi controlador de esta forma:
;(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);
//---------------------------------------------------------
}])
}())
El modal si tiene comunicación con el controlador, ya que me permite crear usuarios, solo ahorita ando agregandole la nueva opción de agregar imagen.
Cuando cargo la vista donde se encuentra el modal en la consola sale lo siguiente, entiendo que si esta cargado el ngImgCrop
y si cargo una imagen al modal solo queda de esta forma:
De antemano muchas gracias.