How do I use jquery in an angular directive

Question

I use jWindowCrop.js to crop an image. But there is an error after I write the code in angular directive. If I use Jquery , the code is like this:

HTML:

<img class="crop_me" alt="" src="imageUrl" />    
<div id="results">
    <b>X</b>: <span id="crop_x"></span><br />
    <b>Y</b>: <span id="crop_y"></span><br />
    <b>W</b>: <span id="crop_w"></span><br />
    <b>H</b>: <span id="crop_h"></span><br />
</div>
<!--ng-show="if_uploaded_crop_img"-->
<button type="button" class="btn btn-primary"  data-ng-click="upload_cropedimg()">
    upload
</button>

Jquery:

<script type="text/javascript">
    $(function() {

        $('.crop_me').jWindowCrop({
            targetWidth: 300,
            targetHeight: 300,
            loadingText: 'hello world',
            onChange: function(result) {
                $('#crop_x').text(result.cropX);
                $('#crop_y').text(result.cropY);
                $('#crop_w').text(result.cropW);
                $('#crop_h').text(result.cropH);
            }
        });
    });
</script>

Angular directive:

.directive('crop', [function () {
    return {
        restrict:'E',
        templateUrl: 'img-token/views/img-crop.html',
        link: function(scope, elements, attrs){
            console.log(elements[0].firstChild);//<img class="crop_me" alt src>
            elements[0].firstChild.jWindowCrop({
                targetWidth: 300,
                targetHeight: 300,
                loadingText: 'hello world'
            });
        }
    };
}]);

The directive can render the html page but the error message is "undefined is not a function". I think the problem is in this code:

elements[0].firstChild.jWindowCrop

So I want to know what is the proper way the write the jquery code in angular directive? If I need to dynamically loaded HTML in AngularJS?

Answer 1

elements[0].firstChild.jWindowCrop(..) does not refer to a jQuery object. Try this instead:

$(elements[0]).children().first().jWindowCrop(...)