AngularJS: Modifica Bootstrap Modal después de cargar contenido

Quiero usar esta bonita image cortadora en mi proyecto AngularJS. Cuando lo uso de la manera "normal", es decir, en una página normal, todo funciona bien. El problema es que quiero ponerlo en el dialog modal de Bootstrap.

Para inicializar el cultivador, se supone que debo ejecutar este fragment:

$(".cropper").cropper({ aspectRatio : 1.618, done : function(data) { console.log(data); } }); 

Pero tiene que ejecutarse después de que se carga el DOM del modal. Así que he intentado ejecutarlo así:

 $scope.onCropOpen = function() { var modalInstance = $modal.open({ templateUrl : 'cropModal.html', controller : CropModalInstanceCtrl }); modalInstance.opened.then(function() { $(".cropper").cropper({ aspectRatio : 1.618, done : function(data) { console.log(data); } }); }); }; 

Desafortunadamente, el cultivador todavía no se está inicializando. Sé que debería funcionar después de llamarlo cuando se carga el modal, porque lo ejecuté manualmente desde la console del browser (con el cuadro de dialog modal abierto) y luego el cultivador se inicializó "mágicamente".

Aquí hay una directiva muy simple que puede mostrarle la dirección. En lugar de definir el elemento con la class ".cropper", crea el elemento "image-cropper" (ya que el nombre de la directiva es "imageCropper"):

 <image-cropper></image-cropper> 

Este es un fragment bastante general que debería funcionar de forma similar para cualquier plugin jquery.

* No se olvide de cambiar el nombre del module de "myApp", al nombre de su module de aplicación …

 angular.module("myApp").directive('imageCropper', function ($parse) { return { restrict: "E", replace: true, compile: function (element, attrs) { var modelAccessor = $parse(attrs.ngModel); var html = "<img></img>"; var newElem = $(html); newElem.attr("src", attrs.src); element.replaceWith(newElem); return function (scope, element, attrs, controller) { element.cropper({ aspectRatio : 1.618, done : function(data) { console.log(data); } }); }; } }; }); 

Intenta poner el código jquery dentro de la function CropModalInstanceCtrl:

 var CropModalInstanceCtrl = function ($scope, $modalInstance) { $(".cropper").cropper({ aspectRatio : 1.618, done : function(data) { console.log(data); } }); } 

La solución de Vitali se hace de la manera correcta y definitivamente debería usarse. Pero si alguien todavía necesita un método bruto, esto también funcionó para mí:

 modalInstance.opened.then(function() { $timeout(function() { $(".cropper").cropper({ aspectRatio : 1.0, done : function(data) { console.log(data); } }); }); }); 

En general, este tipo de soluciones deben evitarse porque los times de espera pueden ser traicioneros.