Calling all developers for assistance! I am experiencing an issue with updating a value dynamically inside an AngularJS controller that is being passed to an HTML tag. Everything works perfectly when updating the value outside of a function:
var app = angular.module('previewApp', []);
app.controller('previewCtrl', function ($scope) {
var $ = jQuery;
var targetValue = 0;
$scope.w = targetValue;
});
The value is then passed to an HTML span tag:
<span style="width:{{w}}px;height:{{h}}px; background-color: white" class="item-inner">
However, I encounter a problem when trying to update the value dynamically within a function using jQuery. Although the value is updated correctly in the console (console.log('Width ' + targetValue);), it does not reflect in the HTML tag:
function onChangeWidth(event) {
if (event.which != 8 && event.which != 0 && (event.which < 48 || event.which > 57)) {
isProcess = false;
}
const targetValue = $(this).closest('.gfield').find('input').val();
// $scope.width = ;
$scope.w = function () {
return targetValue;
};
$scope.docPPIWidth = ppi * +targetValue;
console.log('Width ' + targetValue);
$scope.w = targetValue; //updating w didn't work inside function
}
function onChangeHeight(event) {
const targetValueH = $(this).closest('.gfield').find('input').val();
if (event.which != 8 && event.which != 0 && (event.which < 48 || event.which > 57)) {
var isProcess = false;
}
$scope.docPPIHeight = ppi * targetValueH;
console.log('Height ' + targetValueH);
}
$('.width_check input').on('change click', onChangeWidth);
$('.height_check input').on('change click', onChangeHeight);