Question

基本上我使用ng-file-upload通过angular上传图像，然后我想显示它并初始化一个名为Cropper的jQuery插件。

如何从这个运行jQuery代码？它的唯一工作方式是在上传前加载$scope.loadedImage。

HTML：

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

角

  $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

我会编写一个自己的指令，它将观察src属性并在加载图像时初始化cropper。

~~在我看来，image.onload只会触发一次，所以你必须删除并放置一个新的图像但是先尝试一下而不去除：）~~
编辑：凯文B说这个想法错了

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

对于这种情况，您可以使用setTimeout并在稍微延迟后执行您的jquery代码。因为角度在视图中绑定数据花费了一点点（很少）的时间。所以你需要一点延迟。

此外，我还撰写了一篇博文，其中我给出了一个通用的解决方案，在ng-repeat完成绑定所有数据后调用回调函数。你也可以尝试一下。 Check this post here.如果您有任何疑惑，请告诉我。感谢。

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

2 个答案: