Angular 范围在 JQuery 调用后未更新

Question

我在基于 angular 的网站中使用 jasper 报告。 Jasper 报告的 visualize.js 包括 jQuery。当我加载报告时，我会更新范围内的值

$scope.reportLoaded = true

但页面未更新

{{reportLoaded}} //false

我猜想这可能是angular和jQuery之间的冲突。解决这个问题的唯一方法是使用 $scope.$$apply() 我已经读过我们不应该使用它。我如何在不使用申请的情况下解决这个问题？如果没有其他方法可以解决问题，使用它是否安全？

Answer 1

您必须在这些情况下使用 $apply。这就是 $apply 的用途。这是为了说

"hey angular, i did some changes without your knowledge. you should better run your dirty checking mechanism to see what has changed"

所以，使用 $apply

Answer 2

angular 未完成范围内的任何更新都不会被 angular 注意到。所以当你更新当前 $scope.

中的任何值时，你必须使用 $scope.$apply();

Angular 是一种双向数据绑定机制，因此当您更改模型时会更新视图，反之亦然。在内部 angular 运行是一个 $digest 循环，它在当前 $scope 中执行所有检查。只要您在 angular 内的 $scope 变量中进行更新，事情就会正常进行，但在它之外，如果您使用本机 javascript 或其他库（如 jQuery 更改值那么 $digest 周期必须是运行，这就是 $scope.$apply() 派上用场的地方。

$scope.$digest() 也非常有用，它比 $scope.$apply() 快得多，因为它 $scope.$digest() 运行在当前范围内，但 $scope.$apply() 运行s on $rootscope 并在内部触发 $rootscope.$digest()。

$scope.$digest() 要首先使用它，您需要设置一个范围观察器，它实际上所做的是，它不断地观察范围变化，无论它是来自 angular 还是来自其他如果您想与 $scope.$digest() 一起使用，在这种情况下像您这样的资源是设置范围观察器的完美示例。

$scope.$watch('reportLoaded', function(newValue, oldValue, scope) {
   scope.reportLoaded = newValue !== oldValue ? newValue : oldValue;
});

Angular 范围在 JQuery 调用后未更新

Angular scope not updating in after JQuery call

jquery

angularjs

visualize