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