即使模型没有变化，如何强制 angular 到 re-bind/update

Question

好的——所以你可能在想为什么你想要这个，但我正在尝试使用 ng-html-bind 渲染一些 HTML 像这样（在 HAML 中）：

#my-visualization-panel{'ng-bind-html' => 'htmlSource'}

htmlSource 有一些 html 使用 c3.js 可视化库呈现可视化。 htmlSource 看起来像这样

<script>
  var MY_DATA = localStorage.getItem('MY_DATA');
  c3.generate({
    data: {
      columns: MY_DATA
    }
 });
</script>

所以问题是我通过重新设置 localStorage['MY_DATA'] 来更新可视化。但是，虽然 MY_DATA 引用的数据可能会更改，但实际 htmlSource 不会更改，因此视图无法更新。

有没有办法强制视图更新，即使模型表面上没有更新？

Answer 1

您可以使用 $scope 对象的 apply 方法：

$scope.apply();

如果您仍然遇到正在进行摘要的错误，您还可以使用 $timeout 对象，它将运行下一个摘要周期中的函数：

$timeout(function() {
    //code
});

根据您在此答案中的最新评论，您似乎正在寻找 $scope.watch 方法。您可以添加一个观察者，以便在发生变化时收听。

Answer 2

我还是建议更改 HTML。例如

<script>
  var MY_DATA = localStorage.getItem('MY_DATA');// 2482486284968248968 (hash of my_data, guid, or serial number)
  c3.generate({
    data: {
      columns: MY_DATA
    }
 });
</script>

这将允许您的脚本直接按照您的预期运行，而无需进行大范围的更新或修改。即使你 "force a refresh"，如果 HTML 没有改变，Angular 也不会重新执行你的脚本。

另一种可能性是在您的 angular 控制器/指令中调用 localStorage.getItem('MY_DATA')，而不是间接希望 Angular 会通过 HTML 为您运行更新。这似乎是您正在寻找的那种控制方式。

Answer 3

我花了大约 2-3 个小时来解决这个问题。最后我找到了解决方案

$scope.$apply();

即使模型没有变化，如何强制 angular 到 re-bind/update

how to force angular to re-bind/update even there is no change in the model

angularjs

ng-bind-html