无法更新函数内的变量值 angularjs

Question

您好，开发人员请帮忙，在传入 html 标记的 angularjs 控制器中动态更新值完美运行。但是当我在函数内部（在控制器内）使用范围变量时。

在函数外更新值时工作完美：

var app = angular.module('previewApp', []);

app.controller('previewCtrl', function ($scope) {
  var $ = jQuery;
  var targetValue = 0;
  $scope.w = targetValue;
});

传递给 html 跨度标签：

<span style="width:{{w}}px;height:{{h}}px; background-color: white" class="item-inner">

但是只要输入事件触发值没有在函数内部动态更新，我就会使用 jQuery 获取值，在控制台中值正在完美更新 (console.log('Width ' + targetValue); ) 但不在 html 标签中：

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

Answer 1

我给你的第一个建议是开始考虑如何防止混合 JQuery 和 AngularJS，因为最终你会以“bug 末日”告终。我认为你的情况是 Angular 不知道 JQuery 触发了一个事件，所以摘要循环不会自动触发。同样，此解决方案可以在特定情况下为您提供帮助，但这确实不是一个好的做法：

$scope.w = targetValue;
$scope.$digest();

更改范围变量后，让 Angular 知道它必须通过添加 $scope.$digest() 触发摘要循环来刷新视图数据。此函数将仅检查此组件及其子范围数据。如果您需要检查整个应用程序，请使用 $rootScope.$digest()（从性能的角度来看非常糟糕的决定）。

无法更新函数内的变量值 angularjs

Can't update variable value inside function angularjs

html

javascript

css

angularjs