我如何在角度指令中使用jQuery

Question

我使用jWindowCrop.js裁剪圖像。 但是我在angular指令中編寫代碼后出現錯誤。 如果我使用Jquery ，則代碼如下所示：

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('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'
            });
        }
    };
}]);

該指令可以呈現html頁面，但錯誤消息是“未定義不是函數”。 我認為問題出在以下代碼中：

元素[0] .firstChild.jWindowCrop

所以我想知道在angular指令中編寫jQuery代碼的正確方法是什么？ 如果我需要在AngularJS中動態加載HTML？

Answer 1

elements[0].firstChild.jWindowCrop(..)不引用jQuery對象。 嘗試以下方法：

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