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

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

如何从这一个运行jQuery代码？它工作的唯一方式是在上载之前加载

$scope.loadeImage

时

HTML:

棱角的

  $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);
    });
}

---

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

---

我还写了一篇博文，其中给出了一个通用解决方案，在ng repeat完成所有数据绑定后调用回调函数。你也可以试试。如果您有任何疑问，请告诉我。谢谢。

我将编写自己的指令，在加载图像时观察src属性并初始化裁剪器

在我看来，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 );
                            }
                        } );
                    } );
                } );
            } );
        }
    }
} ] );

---

如果您将响应输出到控制台，您会看到什么？加载事件总是激发，只是如果您在src更改/更新之前不绑定加载事件，加载事件将在您绑定到它之前发生。在iFrame上也是这样吗？我想打印pdf时遇到了这个问题。我将其加载到iframe并等待onload事件：我不确定iframe，我假设是这样，但没有广泛使用iframe。这一延迟给了我大量的研究时间，因为我意识到我的代码中有一个bug，在childscope中，值发生了变化，parentscope无法识别：在这种情况下，我认为最好使用安全的指令，所有代码和逻辑都可以根据需要工作。你可以试试：）我用了指令。我的编译代码有35814行：D目前编译版本的大小为545KB。我有一些复选框指令，当值改变时，这些复选框将调用函数。调用parentScope中的函数时，值尚未更改。但我传递了新值，以便从参数中获取值：）