Looking to pass input values on ng-click even when they are changed outside of Angular. Everything works fine when manually typing, but once the inputs have dynamic values, ng-click passes empty form data. Below is the HTML code snippet:
<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>
Below are the AngularJS scripts for this functionality:
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); //log remains empty when values change from outside of Angular
}
}
}]);
I've found that using $scope.$apply(); might be the solution, so how can I implement this in the above form?
UPDATE 1
The values are being updated by jQuery code directly placed on the HTML page:
<script type="text/javascript">
$(function () {
$('#imgcrop').Jcrop({
onSelect: getcroparea,
aspectRatio: 1 //square selection for cropping
});
})
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>
UPDATE 2
"$scope is not defined" error encountered
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();
};