如何在加载角度函数后运行 jQuery 代码？

Question

Basically I upload an image through angular with ng-file-upload and then I want to display it and initialize a jQuery plugin called Cropper.

How can I run the jQuery code from this one? The only way it works is when I have the $scope.loadedImage loaded before the upload.

HTML:

<img id="cropImage" ng-src="/{{loadedImage}}" />

Angular

  $scope.upload = function (dataUrl) {
    Upload.upload({
        url: '/photocalc/upload/file',
        method: 'POST',
        file: dataUrl,
    }).then(function (response) {
        $timeout(function () {
            $scope.result = response.status;
            $scope.loadedImage = response.data;

            jQuery('#cropImage').cropper({
              viewMode: 0,
              zoomable: false,
              dragMode: 'crop',
              guides: true,
              highlight: true,
              cropBoxMovable: true,
              cropBoxResizable: true,
              crop: function(e) {
                // Output the result data for cropping image.
                console.log(e.x);
                console.log(e.y);
                console.log(e.width);
                console.log(e.height);
                console.log(e.rotate);
                console.log(e.scaleX);
                console.log(e.scaleY);
              }
            });
        });
    }, function (response) {
        if (response.status > 0) $scope.errorMsg = response.status
            + ': ' + response.data;
    }, function (evt) {
        $scope.progress = parseInt(100.0 * evt.loaded / evt.total);
    });
}

Answer 1

I would write an own directive which will observe the src attribute and init the cropper when the image loaded.

In my mind the image.onload will only fire once so you would have to remove and place a new image but try it without removing at first :)
edit: as Kevin B said this thought was wrong

angular.module( "$name$" ).directive( "imageCropper", [ function () {
    return {
        restrict: "A",
        link    : function ( $scope, $el, $attr ) {
            $attr.$observe( "src", function ( src ) {
                $el.on( "load", function () {
                    $timeout( function () {
                        $scope.result      = response.status;
                        $scope.loadedImage = response.data;

                        jQuery( '#cropImage' ).cropper( {
                            viewMode        : 0,
                            zoomable        : false,
                            dragMode        : 'crop',
                            guides          : true,
                            highlight       : true,
                            cropBoxMovable  : true,
                            cropBoxResizable: true,
                            crop            : function ( e ) {
                                // Output the result data for cropping image.
                                console.log( e.x );
                                console.log( e.y );
                                console.log( e.width );
                                console.log( e.height );
                                console.log( e.rotate );
                                console.log( e.scaleX );
                                console.log( e.scaleY );
                            }
                        } );
                    } );
                } );
            } );
        }
    }
} ] );

Answer 2

For this kind of situation you can use setTimeout and execute your jquery code after a little delay. Because it took a little bit(a very little) of time for angular to bind data in the view. So you need a little delay.

Also I've written a blog post where I've given a generic solution to call a callback function after ng-repeat finish binding all its data. You can try that as well. Check this post here. Let me know if you have any confusion. Thanks.