Question

我想在我的AngularJS项目中使用这个漂亮的image cropper。当我使用它时，＆＃34;正常＆＃34;方式，就是在普通页面上，一切正常。问题是我想把它放在Bootstrap模态对话框上。

为了初始化cropper，我应该执行这个片段：

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

不幸的是，裁剪器仍然没有被初始化。我知道在加载模态后调用它应该可以正常工作，因为我从浏览器控制台手动运行它（打开模态对话框），然后是裁剪器＆＃34;神奇地＆＃34;初始化。

Answer 1

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

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

                    };

                }
            };
        });

Answer 2

尝试将jquery代码放在CropModalInstanceCtrl函数中：

var CropModalInstanceCtrl = function ($scope, $modalInstance) {

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

}

Answer 3

维塔利的解决方案以正确的方式完成，绝对应该使用。但如果有人仍然需要一个粗暴的方法，这对我也有用：

modalInstance.opened.then(function() {
    $timeout(function() {
        $(".cropper").cropper({
            aspectRatio : 1.0,
            done : function(data) {
                console.log(data);
            }
        });
    });
});

通常，应该避免使用这种类型的解决方案，因为超时可能是危险的。

AngularJS：加载内容后修改Bootstrap模态

3 个答案: