javascript - AngularJS:加载内容后修改Bootstrap模式

我想在我的AngularJS项目中使用这个漂亮的image cropper。当我以普通方式使用它时，即在普通页面上，一切正常。问题是我想将其放到Bootstrap模式对话框中。

为了初始化裁剪器，我应该执行以下代码段:

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

但是必须在加载模态的DOM之后执行。所以我试图这样运行它:

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

不幸的是，收割机仍未初始化。我知道加载模态后调用它后应该可以工作，因为我是从浏览器控制台中手动运行它的(打开了模态对话框)，然后“神奇地”初始化了裁剪器。

最佳答案

这是一个非常简单的指令，可以向您显示方向。
创建元素“image-cropper”(因为伪指令名称为“imageCropper”)，而不是使用类“.cropper”定义元素:

<image-cropper></image-cropper>

这是一个非常通用的代码段，适用于任何jquery插件。

*不要忘记将模块名称从“myApp”更改为您的应用程序模块的名称...

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

                    };

                }
            };
        });