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页面，但错误消息是＆＃34; undefined不是函数＆＃34;。我认为问题在于此代码：

元素[0] .firstChild.jWindowCrop

所以我想知道在angular指令中编写jquery代码的正确方法是什么？如果我需要在AngularJS中动态加载HTML？

Answer 1

elements[0].firstChild.jWindowCrop(..)不引用jQuery对象。试试这个：

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

如何在angular指令中使用jquery

1 个答案: