ngCropper error element.cropper is not a function

[alexandre-janniaux]

Hi,

I have an issue when I use the ng-cropper directive. It returns an error

error, element.cropper in not a function

I tried to patch the sources and put jQuery(element) instead of element at lines 2115 and 2123 and it works now. Did I make a mistake ?

My javascript code:

$scope.cropper = {};
$scope.cropperProxy = 'cropper.first';
$scope.options = {
    maximize: true,
    aspectRatio: 2 / 1,
    crop: function(dataNew) {
        data = dataNew;
    }
};
$scope.show_cropper = function() {
    $scope.$broadcast('cropper:show');
}

$scope.on_logo_file = function(data) {
    Cropper.encode((file = data)).then(function(dataUrl) {
        $scope.logoUrl = dataUrl;
        $timeout($scope.show_cropper);  // wait for $digest to set image's src
    });
}

My includes

<script src="node_modules/jquery/dist/jquery.js"></script>
<!--<script src="node_modules/cropper/dist/cropper.js"></script>-->
<script src="node_modules/ngCropper/dist/ngCropper.all.js"></script>

My html

<div>
    <input type="file" onchange="angular.element(this).scope().on_logo_file(this.files[0])">
    <div>
        <img
        style="max-width:100%"
        ng-cropper
        ng-cropper-proxy="cropperProxy"
        ng-cropper-show="'cropper:show'"
        ng-cropper-hide="'cropper:hide'"
        ng-cropper-options="options"
        ng-src="{{logoUrl}}"/>
    </div>
</div>

Thanks !

[josephlaw]

I put jquery.js script before any angularjs to fix the problem. @alexandre-janniaux