Javascript 如何在angular指令中使用jquery

我使用

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>

<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>

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

X:

Y:

W:

H:

上传

Jquery:

<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>

<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>

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

$（函数（）{
$（'.crop_me'）.jWindowCrop({
目标宽度：300，
目标：300，
加载文字：“你好，世界”，
onChange：函数（结果）{
$（'#crop_x'）.text（result.cropX）；
$（'#crop_y'）.text（result.cropY）；
$（'#crop_w'）.text（result.cropW）；
$（'#crop_h'）.text（result.cropH）；
}
});
});

角度指令：

<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>

<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>

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

.directive（'crop'，[function（）{
返回{
限制：'E'，
templateUrl:'img token/views/img crop.html'，
链接：功能（范围、元素、属性）{
console.log（元素[0].firstChild）//
元素[0]。firstChild.jWindowCrop({
目标宽度：300，
目标：300，
加载文字：“你好，世界”
});
}
};
}]);

该指令可以呈现html页面，但错误消息为“undefined is not a function”。我认为问题出在这段代码中：

元素[0]。firstChild.jWindowCrop

---

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

元素[0]。firstChild.jWindowCrop（..）

不引用jQuery对象。请尝试以下方法：

$（元素[0]）.children（）.first（）.jWindowCrop（…）