在 Angular 之外更改时处理 ng-click 上的输入值
Process input values on ng-click when they changed outside of Angular
当输入值在 angular 之外更改时,如何在 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>
这里是 AngularJS 代码:
angular.module('blogAdmin').controller('ThumbnailsController', ["$rootScope", "$scope", "$location", "$http", "$filter", "dataService", function ($rootScope, $scope, $location, $http, $filter, dataService) {
$scope.thumbnail = {};
$scope.save = function () {
if ($scope.thumbnail) {
console.log($scope.thumbnail); //empty log when values changes outside of angular
}
}
}]);
通过谷歌搜索,我注意到 $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>
更新 1
使用时“$scope 未定义”
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();
};
您应该将表单和可裁剪区域都包裹在一个指令中。
在这里,您可以访问应用第三方库的 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>
$scope.thumbnail = .. 是上面代码中的新内容,它每次都分配范围变量。
当输入值在 angular 之外更改时,如何在 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>
这里是 AngularJS 代码:
angular.module('blogAdmin').controller('ThumbnailsController', ["$rootScope", "$scope", "$location", "$http", "$filter", "dataService", function ($rootScope, $scope, $location, $http, $filter, dataService) {
$scope.thumbnail = {};
$scope.save = function () {
if ($scope.thumbnail) {
console.log($scope.thumbnail); //empty log when values changes outside of angular
}
}
}]);
通过谷歌搜索,我注意到 $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>
更新 1
使用时“$scope 未定义”
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();
};
您应该将表单和可裁剪区域都包裹在一个指令中。 在这里,您可以访问应用第三方库的 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>
$scope.thumbnail = .. 是上面代码中的新内容,它每次都分配范围变量。