Javascript 当输入值在角度范围外更改时，在ng上单击处理输入值

当输入值在角度范围外发生变化时，如何在ng click上传递输入值。当我自己输入文本时，一切正常，但一旦输入得到动态值，ng click就会传递空表单。下面是我将使用的HTML：

<form id="form" action="" style="margin:0;">
    <img src="jCrop/images/imagename.jpg" id="imgcrop"/>
    <input type="text" name="hdnx" id="hdnx" data-ng-model="thumbnail.hdnx" ng-change="alert('test')" />
    <input type="text" name="hdny" id="hdny" data-ng-model="thumbnail.hdny" />
    <input type="text" name="hdnw" id="hdnw" data-ng-model="thumbnail.hdnw" />
    <input type="text" name="hdnh" id="hdnh" data-ng-model="thumbnail.hdnh" />
    <button ng-click="save()">Crop Image & Save Selection</button>
</form>

通过谷歌搜索，我注意到$scope.$apply（）；将帮助我，如果是这样的话，如何使用上述形式

更新1

值是通过直接位于HTML页面上的jQuery代码进行的更改：-

<script type="text/javascript">
    $(function () {
        $('#imgcrop').Jcrop({
            onSelect: getcroparea,
            aspectRatio: 1  //square selection to crop
        });
    })
    function getcroparea(c) {
        $('#hdnx').val(c.x);
        $('#hdny').val(c.y);
        $('#hdnw').val(c.w);
        $('#hdnh').val(c.h);
        console.log(c.h + " : " + c.w);
        $('#selectedSize').html("Selected region " + c.h + "px : " + c.w + "px");
    };
</script>

---

您应该在指令中包装窗体和可裁剪区域。

---

在这里，您可以访问应用第三方库的DOM元素，而不是更改输入文本值，而是直接在范围变量上更改它。

可能有简单的解决方案，但我使用以下方法解决了此问题：

<script type="text/javascript">
$(function () {
    $('#imgcrop').Jcrop({
        onSelect: getcroparea,
        aspectRatio: 1  //square selection to crop
    });
})
function getcroparea(c) {
    $('#hdnx').val(c.x);
    $('#hdny').val(c.y);
    $('#hdnw').val(c.w);
    $('#hdnh').val(c.h);
    console.log(c.h + " : " + c.w);
    $('#selectedSize').html("Selected region " + c.h + "px : " + c.w + "px");

    $scope.thumbnail = { "id": $scope.id, "hdnx": c.x, "hdny": c.y, "hdnw": c.w, "hdnh": c.h, "imgcrop": $scope.firstImageSrc };

};
</script>

$（函数（）{
$（'#imgcrop'）.Jcrop({
onSelect:getcroparea，
aspectRatio:1//要裁剪的方形选择
});
})
函数getcroparea（c）{
$（'hdnx'）.val（c.x）；
$（'hdny'）.val（c.y）；
$（'hdnw'）.val（c.w）；
$（'hdnh'）.val（c.h）；
控制台日志（c.h+“：”+c.w）；
$（'#selectedSize'）.html（“选定区域”+c.h+“px:+c.w+“px”）；
$scope.thumboil={“id”：$scope.id，“hdnx”：c.x，“hdny”：c.y，“hdnw”：c.w，“hdnh”：c.h，“imgcrop”：$scope.firstImageSrc}；
};

---

$scope.缩略图=。。在上述代码中是新的，它每次都分配范围变量。

当值在角度之外更改时

-->发生此情况的代码段在哪里？这就是

$apply

的位置needed@charlietfl在更新中查找代码如果您在注释中有答案，请在

getcropera

@PSL在更新中查找代码中设置值后使用它

    function getcroparea(c) {
        $('#hdnx').val(c.x);
        $('#hdny').val(c.y);
        $('#hdnw').val(c.w);
        $('#hdnh').val(c.h);
        console.log(c.h + " : " + c.w);
        $('#selectedSize').html("Selected region " + c.h + "px : " + c.w + "px");

        $scope.$apply();
    };

<script type="text/javascript">
$(function () {
    $('#imgcrop').Jcrop({
        onSelect: getcroparea,
        aspectRatio: 1  //square selection to crop
    });
})
function getcroparea(c) {
    $('#hdnx').val(c.x);
    $('#hdny').val(c.y);
    $('#hdnw').val(c.w);
    $('#hdnh').val(c.h);
    console.log(c.h + " : " + c.w);
    $('#selectedSize').html("Selected region " + c.h + "px : " + c.w + "px");

    $scope.thumbnail = { "id": $scope.id, "hdnx": c.x, "hdny": c.y, "hdnw": c.w, "hdnh": c.h, "imgcrop": $scope.firstImageSrc };

};
</script>