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

How to run a jQuery code after an angular function was loaded?

本文关键字：运行 jQuery 代码 函数 加载      更新时间：2023-09-26

基本上，我通过angular上传一个图像，上传ng文件，然后我想显示它并初始化一个名为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);
    });
}

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

在我看来，image.onload只会触发一次，因此您必须删除并放置新图像，但一开始不删除即可尝试：）
编辑：正如Kevin 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 );
                            }
                        } );
                    } );
                } );
            } );
        }
    }
} ] );

对于这种情况，您可以使用setTimeout并在稍有延迟后执行jquery代码。因为angular在视图中绑定数据需要一点（非常少）时间。所以你需要一点延迟。

此外，我还写了一篇博客文章，其中我给出了一个通用的解决方案，可以在ng-reeat完成绑定所有数据后调用回调函数。你也可以试试。请在此处查看此帖子。如果你有任何困惑，请告诉我。谢谢

相关文章：